FrontEngineer JungBam

useState와 props를 배우는 주특기 기본주가 끝나고 Redux를 배우는 주특기 심화주를 맞이한 주일. Redux는 한달 전에 끼적이고 넘겼는데 확실히 하루 16~18시간 코드만 보고있는 나한테 있어서 흐름이 보이니까 코드를 짜는데 있어서 어려움은 없었다. 내가 생각하는 개발자가 되기 위해 한주동안 부단히 노력했던 것 같다. 자신이 갖고 있는 것을 나눠주면서 자신이 고이지 않게 만들고 같이 나아갈 수 있게 만드는 그런 개발자. 배우는 것은 당연하고 화요일은 13시간이나 같은 반 분들의 코드를 봐주고 useState와 렌더링에 대해서 설명하다보니 힘들기도 했지만 그래도 재미있었고 가르쳐주면서 새로운 것들을 공부하고 내가 알고 있던 것들을 입밖으로 정리해서 내뱉으면서 지식이 견고해지는 것을 느꼈다. ..

컴포넌트 최적화를 위한 리액트 훅 : useMemo, useCallback 어떤 면에서 최적화일까? 렌더링 과정에서 불필요한 값, 함수 생성에 따른 메모리 할당 이슈를 해결해줌.

props에 따른 리렌더링에 제한을 두어 리렌더링으로 인한 앱의 성능이 저하될 때 사용하는 방법 너무 잦은 실행은 오히려 메모리할당으로 인한 성능저하를 야기할 수 있기 때문에 같은 props로 인해 같은 결과의 렌더링이 반복되는 컴포넌트나 혹은 복잡한 로직으로 인하여 렌더링에 있어 성능 이슈가 생길 컴포넌트만 사용하는 것이 좋음. **사용 방법** props 체크를 할 컴포넌트에서 memo를 import import {memo} from 'react' 함수 컴포넌트가 export되는 곳에 memo로 감싸서 체크해주도록 하기 export default memo(memoComponent)

import { RecoilRoot } from 'recoil'; RecoilRoot는 Provider와 비슷한 개념으로 Recoil을 사용하는 최상위 컴포넌트를 덮어서 그 컴포넌트 하위 컴포넌트들이 Recoil을 사용할 수 있게 해주는 친구다. 소규모 프로젝트에서는 그냥 RecoilRoot로 index를 덮으면 될 것 같다. 근데 공식문서를 보면 RecoilRoot가 중첩이 된다면 가장 안쪽의 RecoilRoot가 다른 값들을 먹는 값이 된다고 하는데 이게 어떤 것인지 한번 찾아봐야겠다..

React 앱을 만들고 Recoil을 사용하기 위해서는 설치를 해야한다.ㅣ npm install recoil Atom은 쉽게 말하면 state 값이다. Recoil을 사용하기 위해서는 atom을 생성해줘야 하는데 atom은 아래와 같이 생성하면 된다. 이렇게 생성된 atom은 atom의 값을 읽는 컴포넌트들이 이 atom을 바라보게 한다. => 바라본다라는 것은 atom의 변화를 감지하면 해당 컴포넌트들은 리렌더링 한다는 것이다. import { atom } from "recoil"; export const recoilAtom = atom({ key : 'RECOIL_ATOM', default: 0 })

리렌더링은 다시 한번 함수형 컴포넌트가 마운트되어지면서 함수형 컴포넌트 내부에 있는 코드들이 실행되는 것을 이야기한다.(물론 useEffect는 별개의 문제이고) 이 함수형 컴포넌트가 불려지면서 useState가 실행되고 useState를 통해 초기값을 부여했을 때 신기한 것을 알았다. 우리가 알듯 useState는 초기값으로 먼저 실행되었다가 상태값을 변경해주는데 소켓작업이나 로컬스토리지 작업을 하는 state를 초기화된 단계에서 다시한번 실행된다면? 신기하게도 초기화된 값이 나온다.(내가 생각하지 않은 결과이기 때문에 당연히 조치가 필요하다.) 이러한 문제를 해결해주는 것이 사이드 이펙트에서의 초기값 계산이다. 사이드 이펙트는 이 스크립트가 실행될 때 함수형 컴포넌트 이전에 실행되어지고 함수형 컴포넌..

와 진짜... rfce 개꿀이다. html에서 ! 가 있다면 리액트에는 rfce.. 자동으로 해당 js파일 이름으로 함수형 컴포넌트의 뼈대를 만들어준다.

1. 리액트 훅은 함수형 컴포넌트 또는 리액트 커스텀 훅에서 사용된다. 2. 최상위 단계에서 호출(함수형 컴포넌트 내부 최상위 스코프, 커스텀 훅 최상위 스코프) 3. useEffect : 참조하는 prop와 state를 의존성 배열에 추가한다. (의도하여 제외하는경우는 예외) 위의 3가지는 Max가 강의에서 한 애기들이다. 3번에 대해서 스스로 정의 내린 것은 렌더링의 원리를 안다면 렌더링과 관리되는 상태에 따라서 의존성 배열을 고민하고 그에 따라서 의존성 배열에 추가하는 것을 추천한다.