항해 4주차 WIL 주특기 숙련

State 

state는 컴포넌트 내부에서 관리되는 데이터의 상태를 의미 (=함수 내부에 선언된 변수)!

 

Props 

Compoennt 간의 정보교환 방식 
하위 컴포넌트에 값을 전달할 때 사용

 

props는 단반향 데이터 흐름의 리액트를 상위에서 하위로의 데이터 전달을 위해 사용함 (=함수에 전달하는 매개변수)

 

- props는 반드시 위에서 아래 방향으로 흐린다 

 

사이가 먼 컴포넌트에 Props로 정보를 주려고 하면 `propsdrilling` 발생한다 

 

그럴떄를 대비해서 useContext 나 Rudex를 사용하자 

 

리렌더링 이 되는 조건 

1️⃣    컴포넌트에서 state가 바뀌었을때 

2️⃣    컴포넌트가 내려받은 props가 변경되었을때 

3️⃣    부모 컴포넌트가 렌더링 된 경우 자식 컴포넌트도 렌더링이됨

 

 

부모컴포넌트가 렌더링이 되더라도 자식컴포넌트는 렌더링이 되지않아도 되는 상황에서는 

최적화로 방법인 React.memo , useCallback. useMemo 를 사용하면 된다 

 

 

 

 

 

 

이번주 배운것들 정리를 해보자 

- 컴포넌트를 왜 사용하는지 (UI 재사용하기 위해) 

 

- 불변성을 왜 지키야 하는지 (불변성을 지키지않고 직접 수정하면 값은 바꿔어지만 메모리주소는 변하지않아 리렌더링이
 일어나지 않는다 )

 

-Hook들에 의존성 배열이 왜 중요한지

 

- useRef에서 DOM요소를 어떻게 다루는지 

 

- useEffect는 특정 컴포넌트가 화면에 보여졌을때 무엇인가 실행할 수 있도록 하는 Hook이다. 

 

- 

 

- useCallback, useMemo, React.Memo 3개는 최적화를 위해 존재한다. 즉 렌더링을 줄이기 위해 존재 

 

 

 

후기

 

 강의 내용이 익숙지 않아 강의를 들으면 정리를 하느냐고 시간을 많이 썼는데 

그 시간을 쓴 덕분에 이제 조금은 리액트에 익숙해진다는 느낌이 들게 시작하는것 같다 

 

초심을 잊지말고 열심히 하자