이번주(2월 6일 ~ 2월 12일) 리액트 입문부터 리액트 숙련과정까지 리액트에 대해 깊이 배우는 시간이었다.

리액트의 리렌더링 조건

• 컴포넌트에서 state가 바뀌었을 때
• 컴포넌트가 내려받은 props가 변경되었을 때
• 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두

이번주 Weekend, I Learend

1. 컴포넌트는 재사용이 가능하게끔 UI를 여러 조각으로 분리한 것이다. 분리 뿐만 아니라, 컴포넌트를 분리하고 Props를 인자로 받아 넘길 수 있다. 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다. 그러나 공식문서에서는 함수형을 더 권장하고 있다.

2. 데이터 바인딩은 두 데이터 혹은 정보의 소스를 일치시키는 기법이다. 단방향 데이터 바인딩은 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되는 구조이다. 양방향 데이터 바인딩은 부모에서 자식으로도 흐르지만, 자식에서 부모로도 Emit Event를 통해 전달 될 수 있다.

3. export는 여러개의 모듈을 export할 때 쓰이며 export default는 한개의 모듈을 export 할 때 쓰인다. 2개를 import하는 방식은 각각 다르다.

4. useEffect는 특정 컴포넌트가 화면에 보여졌을때 무엇인가 실행할 수 있도록 하는 Hook이다. 의존성 배열에 아무것도 안넣으면 최초 랜더링시 1번만 실행이 되며, 특정 state값을 넣으면 state 값이 변할 때마다 실행된다.

5. useRef는 특정 DOM을 선택해야하는 상황 또는 저장공간으로써의 hook으로써 쓰인다. 특정DOM의 예로 써는 스크롤바의 위치 input에 포커스가 있다. 저장공간으로써는 Ref안에 저장된 값은 랜더링을 일으키지 않는다는 점이 있다.

6. useCallback은 함수를 캐싱하는 hook이다. 함수형 컴포넌트는 리랜더링을 일으키고 그것은 곧 코드가 다시 만들어진다. 그러면 메모리 주솟값이 달라지면서 자식 prop까지 리랜더링이 된다. 그때 useCallback()을 사용하면 된다.

7. React.memo는 컴포넌트를 캐싱하는 hook이다. 부모 컴포넌트의 리렌더링은 곧 자식 컴포넌트의 리렌더링을 뜻한다. 그것을 막기 위해 자식 컴포넌트에 React.memo라는 것을 사용하게 된다.

8. useMemo는 값을 캐싱한다. 어떤 무거운 작업을 하면서 카운트를 증가시켜주는 코드가 있다고 하자. 메모리에 무거운 작업에 대한 값이 저장이 안되어 있다면 리렌더링이 일어날 때마다 카운트는 힘들게 올라갈 것이다. 그때 useMemo를 사용하면 이전에 작업해 놓았던 값이 저장되고 속도는 훨씬 빨라진다.

마지막으로

저번주 목표였던 '과제 잘 해내기'는 성공적이었다. 목표가 구체적이지는 않았다. 그렇지만 내가 과제를 하고 과제에 대해 다른 팀원을 도와주었기 때문에 성공적이라고 말하고 싶다. 다음주 목표는 리액트 Hook(배운것 제외) 10개를 공부해 보는 것이다.