Achievement Goals
- React 데이터 흐름
- React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.
- 어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.
- State 끌어올리기의 개념을 이해할 수 있다.
- 상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다.
- Effect Hook
- Side effect가 어떤 의미인지 알 수 있다.
- React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)
- Side effect의 예를 들 수 있다.
- Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.
- Effect Hook에서의 dependency array 사용법을 이해할 수 있다.
컴포넌트 내에서 네트워크 요청시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다.
React 데이터 흐름
React의 개발 방식 특징 : 컴포넌트 단위로 시작
컴포넌트를 제작 한 뒤 페이지를 조립
-> 상향식으로 앱을 만듬
컴포넌트는 컴포넌트 바깥의 props를 이용하여 데이터를 인자 혹은 속성처럼 전달 받을 수 있음
즉 데이터를 전달하는 주체 -> 부모컴포넌트
-> 데이터 흐름이 하향식임
제작은 상향식으로 작은 컴포넌트부터 제작하지만 데이터 흐름은 위에서 아래로 흐른다.
React의 중요한 설명 중 하나는 단방향 데이터 흐름, 또한 컴포넌트는 props를 통해 전달받은 데이터가 어디서 오는지 알지 못한다.
데이터가 사용자 입력과 같은 이벤트를 통해 변하게 된다면 이것을 상태(state)라고 부름
부모로 부터 props를 통해 전달 된다면?
-> state X
시간이 지나도 변하지 않는다면?
-> state X
컴포넌트 안의 다른 state나 props를 가지고 계산이 가능하다면?
-> state X
state를 위치 시킬 때 한개의 컴포넌트에만 유의미 하면 그 컴포넌트에 state를 두면 됨
만약 두개의 컴포넌트가 영향을 받는다면?
-> 두 컴포넌트를 공통으로 소유하고 있는 부모 컴포넌트에 상태를 위치시켜야함
하위 컴포넌트의 활동으로 인해 부모 컴포넌트의 상태가 변할 때
-> 역방향 데이터 흐름이 추가된 것 -> Lifting state up 상태끌어올리기
이 방법은 상태를 변경시키는 함수를 하위 컴포넌트에 props로 전달하는 방법으로 해결
React 공식 문서
위의 공식문서를 읽으며 react에 대해 더 공부해야함
여지까지 내용은 5번과 12번에 더욱 자세히 나와있음
Effect Hook
-
Side Effect (부수 효과)
side Effect의 원 뜻은 부작용이다. 원래 작용하는 것 이외의 다른 부수적으로 작용됨을 뜻하는데 함수 내의 어떠한 구현이 함수 외부에 영향을 끼치는 경우 함수에 Side Effect가 있다고함 -
Pure Function (순수 함수)
순수 함수란, 오직 함수의 입력이 함수의 결과에 영향을 끼치는 함수를 의미
순수 함수에는 네트워크 요청과 같은 Side Effect가 없다.
순수 함수의 특징 중 하나는, 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장 -
Hook
Hook이란? Hook은 특별한 함수
언제 Hook을 사용할까? 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때
Effect Hook 에 대해서 정확하게 알고넘어가야 한다고 판단해서 쓰던 블로깅을 멈춘다.
블로깅을 하면서 아직 Effect Hook와 React에 대해 블로깅을 할 수 있을 정도도 되지 못했다고 판단했다.
그렇기 때문에 이 블로깅은 비공개처리를 해야겠다.
처음에는 복습을 하면서 복습한 내용을 그대로 블로깅을 하면 된다고 생각했지만 매일 해야한다는 압박감 때문인지, 아니면 공부를 소홀히 하는건지, 점점 받아쓰기만 하고 있는 내 모습을 볼 수 있었다. 앞으로 블로깅은 내용만을 작성하는 것이 아닌 내가 무엇을 배웠고 어떻게 사용했으며 이번 챕터를 통해 어떤것을 배웠다는 것을 새롭게 적어야할 것 같다.
