📌 리액트에서의 데이터 흐름
리액트에서는 하나의 컴포넌트는 한가지 일만 한다고 알고 있다. 그리고 각각의 컴포넌트들이 트리처럼 이어져 있다고 가정해볼 때, 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 인자처럼 혹은 속성처럼 전달할 수 있다.
데이터를 전달하는 주체는 부모 컴포넌트가 되고 이는 데이터 흐름이 하향식임을 알 수 있다.
이것이 바로 리액트의 큰 특징인 단방향 데이터 흐름 이라는 점이다.
but, 하위 컴포넌트(NewTweetForm)에서의 클릭 이벤트가, 부모의 상태를 바꾸어야만 하는 상황이 있다. 그것이 바로 State 끌어올리기(Lifting state up)이다.
ex) twittler 라는 부모컴포넌트에게 newTweetsForm이라는 자식 컴포넌트에서 어떤 데이터가 들어가면 그것이 twittler에게 영향을 미친다.
☑ state 끌어올리기
아래의 예시는 두고두고 머리에 각인 시켜놓고 떠올려야 할 듯하다.
요런 상태라면 handleButtonClick이라는 함수가 handleClick이라는 함수를 구동시킨다. 그리고 handleButtonClick은 ChildComponet에서 속성처럼 사용되서 handleChangeValue를 변화시킨다. 그리고 handleChangeValue는 sevValue를 구동시키는데 setValue는 Value의 갱신함수 이다. 그러므로 최종적으로 빈칸을 변화시킨다.
꼭 읽기
[리액트 상태끌어올리기] https://ko.reactjs.org/docs/lifting-state-up.html
[리액트로 사고하기] https://ko.reactjs.org/docs/thinking-in-react.html
📌 Effect Hook
1) side effect(부수효과)
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다는 것이다.
2) Pure Function(순수함수)
오직 함수의 입력만이 함수의 결과에 영향을 주는 함수. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없고 또한 입력으로 전달된 값을 수정하지 않는다.
3) React 컴포넌트에서의 Side Effect
- 타이머 사용 (setTimeout)
- 데이터 가져오기 (fetch API, localStorage)
1) Math.random()은 순수 함수가 아님
순수 함수라면 동일한 입력값을 주었을 때 항상 동일한 결과값을 리턴해야 하는데, Math.random()을 다시 호출했을 때 똑같은 결과값을 리턴하지 않을 수 있기에2) fetch API를 이용해 AJAX 요청을 하는 함수가 있다고 가정할 때 이 함수 또한 순수함수가 아니다.
☑ Effect Hook 기본
1) Effect Hook을 쓸 때는
- 최상위에서만 Hook을 호출할 것
- React 함수 내에서 Hook을 호출할 것
명언제조라는 버튼을 누르면 아래의 명언이 바뀌고 document.title이 바뀌는것도 확인할 수 있다. 이게 가장 기본형태이다.
그다음은 조건부실행과 ajax실행인데 이건 스프린트를 혼자 다시 복습하면서 정리해보겠다.
