0906 TIL React

React 데이터 흐름

🙆‍♀️React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.
🙆‍♀️어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.
🙆‍♀️State 끌어올리기의 개념을 이해할 수 있다.

자식컴포넌트가 부모컴포넌트로부터 상태변경함수를 받아온다. 자식컴포넌트가 props로 받아온 상태변경함수를 호출해서 부모컴포넌트의 state를 변경시킬 수 있다.

🙆‍♀️상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다.

Effect Hook

🙆‍♀️Side effect가 어떤 의미인지 알 수 있다.
🙆‍♀️React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)
🙆‍♀️Side effect의 예를 들 수 있다.
🙆‍♀️Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.
🙆‍♀️Effect Hook에서의 dependency array 사용법을 이해할 수 있다.
🙆‍♀️컴포넌트 내에서 네트워크 요청시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다.

단 한번만 실행되는 Effect 함수

1. 빈 배열 넣기 useEffect(함수, [])

처음 화면이 보일때(컴포넌트가 처음 렌더링될 때)에만 한번 실행이된다.
외부 API를 통해 리소스를 받아오고 더이상 API 호출이 필요하지 않을 때에 사용한다.

2. 아무것도 넣지 않기 (기본 형태) useEffect(함수)

기본 형태의 useEffect는 컴포넌트가 처음 생성되거나, props가 업데이트되거나, 상태(state)가 업데이트될 때 effect 함수가 실행된다.

Pure function 순수함수

어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장합니다. 그래서 예측 가능한 함수이기도 합니다.
함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없습니다.

🙆‍♀️ Math.random()은 순수 함수가 아닙니다. 왜일까요? 예측할 수 없기 때문이다.

🙆‍♀️ 어떤 함수가 fetch API를 이용해 AJAX 요청을 한다고 가정해봅시다. 이 함수는 순수 함수가 아닙니다. 왜일까요?

1. 에러가날지 원하는 값이 전달될지 예측할 수 없다.
2. fetch로 받은 데이터는 가공을 하게되어있다. 그것을 가지고 또다른 함수를 만들기 때문에 다른 함수에 영향을 준다.

조건부 실행페이지에서 useEffect를 쓰면 무한루프가 걸린 이유

useEffect(함수)이렇게만 적혀져있어서 이 형태가 무한루프를 일으키는줄알고 처음에 착각했었다. 하지만 useEffect의 문제가 아니었다. useEffect가 실행되는 경우는 세가지가 있다.
1. 컴포넌트가 처음 생성되거나
2. props가 업데이트 되거나
3. state가 업데이트 될 때이다.

예제코드에서 [filter]를 지우면 무한 루프가 걸리는 이유는 useEffect 자체 때문이 아니라 컴포넌트가 자꾸 렌더링되었기 때문이다.
과정은 이렇다. 처음에 화면이 보인다(첫 렌더링) -> useEffect가 실행된다. -> filter라는 state의 상태가 setProverbs함수에 의해서 변경된다. -> state가 변한다. -> 또 렌더링 된다. 이게 무한반복되어서 콘솔창이 먹통이 된 것이다.

느낀점

오늘 만난 페어분께 많은 것을 배웠다. react 데이터의 흐름(자식컴포넌트, 부모컴포넌트의 관계)을 그림으로 그리면 좋다는 점. 리액트 파일이 어떤형식으로 구성되어있는지 미리 꼼꼼하게 살펴본 뒤에 코드를 작성하는 것. 항상 남에게 설명해준다고 생각을 하고 공부해야한다는 점.
그리고 일찍좀 자야겠다. 요즘 늦게자서그런지 매일 9시마다 정신을 못차린다 ㅜㅜ