✔ 모든 본문의 내용은 벨로퍼트님의 리액트 라우터 v6 튜토리얼을 보고 정리했습니다. 상세한 내용을 원하시면 하단의 링크를 통해 확인 가능합니다. 👾토픽마다 이모지 표시를 해두었습니다. 주관적인 느낌이며 참고만 하시면 됩니다. ⭐ -> 유용하지만 개인적으로 어렵거나 생소함 😎 -> normal 쉬움 라우팅이란? 웹 어플리케이션에서 라우팅은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미합니다. 여러 페이지로 구성된 웹 어플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 라우팅 시스템입니다. 리액트에서 라우트 시스템을 구축하는 선택지는 크게 두가지 입니다. 리액트 라우터(React Router): 해당 라이브러리는 리액트의 라우팅 관련 라이브..
※해당 글은 원문이 따로 있습니다. 공부용으로 타이핑한 것이니 자세한 내용은 원문을 참고해주세요! 리액트에서 렌더링은 DOM을 업데이트하는 것과 같은 것이 아니고, 컴포넌트는 어떠한 가시적인 변경이 없이도 컴포넌트가 렌더링될 수 있다는 것이다. 리액트가 컴포넌트를 렌더링하는 경우를 살펴보면 컴포넌트는 이전과 같은 렌더링 결과물을 리턴해서, 아무런 변화가 일어나지 않을 수 있다. Concurrent Mode*에서는, 리액트는 컴포넌트를 렌더링하는 작업을 여러번 할 수 있지만, 다른 업데이트로 인해 현재 작업이 무효화되면 매번 렌더링 결과물을 버린다. 이번에 리액트 18에서 나온 Concurrent Mode의 경우, 브라우저가 이벤트를 처리할 수 있도록 렌더링 단계에서 작업을 일시 중지 할 수 있다. 리액트..
🤸♀️HOC(HOC, Higher Order Component)가 뭔가요? 고차 컴포넌트(HOC)는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다. HOC는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다. const EnhancedComponent = higherOrderComponent(WrappedComponent); 컴포넌트와 고차 컴포넌트와의 차이점 컴포넌트는 props를 UI로 변환하는 반면, 고차 컴포넌트는 컴포넌트를 새로운 컴포넌트로 변환합니다. HOC은 언제 필요할까? 규모가 큰 어플리케이션에서 동일한 패턴이 반복적으로 발생한다고 가정했을 때, 그렇게 된다면 로직을 한 곳에서 정의하고 많은 컴포넌트에서 로직을 공유할 수 있게 해주는 추상화가 필요하..
⭐리액트의 클래스형 & 함수형 컴포넌트 ? 리액트 컴포넌트는 클래스형 컴포넌트 또는 함수형 컴포넌트로 작성될 수 있습니다. 둘의 가장 큰 차이점은 상태값과 LifeCycle을 가질 수 있느냐 없느냐 입니다. 클래스형 컴포넌트는 상태값을 가질 수 있고, 리액트 컴포넌트의 생명 주기 함수를 작성할 수 있습니다. 함수형 컴포넌트는 이 모든 일을 할 수 없습니다. 하지만 리액트 버전 16.8부터 훅(Hook)이 등장하면서 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성 할 수 있게 되었습니다. LifeCycle Method는 컴포넌트가 브라우저 상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들입니다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있습니다. *컴포넌트 라이프 ..
목차 useRef Hook ref가 하는 일, 예시 제어 컴포넌트와 비제어 컴포넌트 useEffect Hook useEffect 의 종속성(의존성 배열) 예외 사항 side Effect 가 무엇인가? clean-up 함수를 통해 디바운싱(debouncing)구현하기 [전제조건] 리액트 hook이기 때문에 당연히 함수형 컴포넌트(클래스형) 안에서만 사용할 수 있습니다. ref는 참조(reference)를 뜻합니다. 리액트에서는 ref 라고 부릅니다. useRef는 어떤 값이는 저장할 수 있는 자바스크립트 객체이다. 리액트가 렌더링할 때마다 동일한 객체를 넘기기 때문에 값이 변경되어도 리렌더링이 발생하지 않는다. ref 가 하는 일 ? 다른 DOM 요소에 직접 접근해서 그것들로 작업할 수 있게 해준다. ( ..
🙋♂️메타태그란? - 웹 페이지의 제목이나 이미지, 간단한 설명을 검색엔진에 알려주는 역할을 합니다. Q. 왜 CRS에서 SEO가 어려울까요? 우선 CSR이 검색엔진최적화(SEO)가 어려운 이유는 미리 html을 만들어두는 것(SSR에서는 미리 만들어서 그걸 보내주죠)이 아니라 요청이 들어온 다음에 html을 생성하는 방식이고, CSR을 적용한 SPA들이 하나의 페이지(html파일)만 존재하기 때문에 크롤링할 데이터가 없어서 SEO가 어려운 것이죠. 리액트는 SPA라 html파일이 하나 뿐입니다. 그렇기 때문에 사실은 하나의 Meta tag밖에 가질 수 없습니다. (*create-react-app으로 만든 폴더에 public폴더의 index.html로 가보면 head태그 내부의 meta태그를 확인할 수..
React.memo는 함수형 컴포넌트를 최적화할 수 있다. (클래스형에는 적용되지 않음) 사용방법은 아래와 같이 해당 컴포넌트를 react.memo로 wrap해주면 된다. import React from 'react'; import MyParagraph from "./MyParagraph'; const DemoOutput = (props) => { console.log('demooutput Running'); return {props.show ? "this is new!" : ""} }; export default React.memo(DemoOutput); //리액트 메모를 원하는 해당 컴포넌트에 wrap한다. 😎memo의 역할은 무엇인가요? React.memo는 인자로 들어간 컴포넌트에 어떤 props..
전반적으로 필요한 상태가 아니라 해당 컴포넌트에만 필요한 상태관리는 리덕스가 아니라 useState를 사용하는 것이 맞다. 기본 리덕스 용어 state (상태) - 앱을 구동하는 소스, 특정 시점의 앱 상태를 나타냄 view - 현재 상태를 기반으로 화면에 보이는 UI, 해당 상태를 기반으로 렌더링됨-> UI는 새 상태를 기반으로 다시 렌더링된다. action - 사용자 입력을 기반으로 앱에서 발생하는 이벤트 및 상태에서 업데이트를 발생시킨다. -> 동일한 상태를 공유하고 사용해야 하는 여러 구성 요소가 있는 경우, 특히 해당 구성 요소가 app의 다른 부분에 있는 경우 단순성이 무너질 수 있다. JS의 객체와 배열은 기본적으로 모두 변경 가능하다.(mutable) 하지만 리덕스의 리듀서(reducer)..
- Total
- Today
- Yesterday
- 항해99프론트후기
- aspect-ratio
- nvm 설치순서
- 원티드 3월 프론트엔드 챌린지
- D 플래그
- 항해99추천비추천
- 틸드와 캐럿
- tilde caret
- ~ ^
- 타입스크립트 DT
- getServerSideProps
- fs모듈 넥스트
- is()
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- 타입스크립트 장점
- getStaticPaths
- 항해99프론트
- 원티드 FE 프리온보딩 챌린지
- 원티드 프리온보딩 FE 챌린지
- text input pattern
- float 레이아웃
- nvm경로 오류
- Prittier
- 부트캠프항해
- 프리렌더링확인법
- 프리온보딩 프론트엔드 챌린지 3월
- 형제 요소 선택자
- grid flex
- reactAPI
- && 셸 명령어
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |