왕가's history

React를 사용했을 때, 화면이 그려지는 동작 순서와 화면을 다시 그리게 되는 리렌더링 순서입니다. Mount (마운트) 컴포넌트가 생성되어 렌더링 되는 과정을 마운트라고 하며, 렌더링 된 컴포넌트가 삭제되는 과정을 Unmount(언마운트)라고 합니다. 함수 컴포넌트 호출 구현부 실행 props 전달받고, hook 내부 변수, 함수 생성. (내부 변수 및 함수는 hook에 있는 state나 function을 제외. 이들은 별도로 메모리에 저장되어 관리함.) 가상 DOM을 생성 커밋 실제 DOM에 반영 useLayoutEffect 화면에 Paint 하기 전에, useLayoutEffect에 등록해 둔 effect '동기'로 실행된다. 실제로 해당 훅은 잘 사용하지 않는 것으로 알고 있음. 공식 문서를 확..

useEffect Side-Effect를 처리하기 위한 Hook입니다. Side-Effect : 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위로, 렌더링 된 이후 비동기로 처리되어야 하는 부수적인 것들을 지칭 uesEffect(() ⇒ { … } ,[deps]) 두 번째 인자인 deps에 state값을 넣고, state값이 변할 때마다 해당 useEffect를 실행. 빈 배열로 입력할 경우, 렌더링 후 1번만 실행. 종속성 배열을 아예 지정하지 않았을 경우, 리렌더링 될 때마다 실행. useEffect가 실행되는 시점은 렌더링 결과가 DOM에 반영될 때, 컴포넌트가 사라지기 직전 마지막으로 호출됩니다. 2023.06.20 - [Front-End/React] - React 동작..

useState Component가 가지고 있는 상태값으로 컴포넌트 내부에서의 동적 데이터입니다. 흔히 많이 사용되는 변수라고 생각하면되지만, 아래와같은 특징이 있기 때문에 변수랑은 느낌만 같지 많이 다릅니다. const [변수이름, set변수이름] = useState(초기값); set변수이름은 다른 이름을 넣어도 되고, 선언하지 않아도 상관없습니다. 변수에 값을 직접 대입하는 것이 아니라, set을 통해 값을 대입해줍니다. state값이 변하게 되면 UI가 리렌더링 된다. useState는 비동기로 동작한다. 예 HTML 삽입 미리보기할 수 없는 소스 input태그의 값을 입력해 주면서 content라는 state값을 확인할 수 있게 작성하였다. content선언할 때는 "" 빈문자열로 초기값을 설정해..