[코드스테이츠/34DAY] S2U9 - [React] 클라이언트 Ajax 요청

🌊 TIL : 2023년 3월 31일  

 

오늘 배운 것

React의 데이터 흐름

리액트의 개발 방식의 가장 큰 특징 → 페이지 단위가 아닌 "컴포넌트 단위"로 시작한다는 점.

컴포넌트를 만들고 페이지를 조립해나가는 즉, 상향식(buttom-up)으로 앱을 만든다.

 

상향식의 장점

• 확장성이 좋다
• 테스트가 쉽다

 

하나의 컴포넌트는 한 가지의 일만 한다.

 

props

컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 전달 받는다.

데이터를 전달해주는 주체는 부모 컴포넌트이며 데이터의 흐름은 하향식(top-down)이다.

 

여기서 헷갈리기 금지!

리액트의 개발 방식은 상향식이나, 데이터의 흐름은 하향식이다. 

 

state

얼마든 지 변할 수 있는 값이 바로 상태(state)다. 

• 상태는 최소화하는 것이 가장 좋다.
• 부모로부터 props를 통해 전달되면 state가 아니다.
• 불변성을 가지고 있으면 state가 아니다.
• 컴포넌트 안의 다른 state나 props를 가지고 계산이 가능하면 state가 아니다.
• 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면 공통 소유 컴포넌트를 찾아 그곳에 상태가 위치해야한다.
  즉, 공통 부모 컴포넌트에 상태가 위치해야 한다.

 

State 끌어올리기

부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변하는 경우, 부모의 상태를 바꾸어야만 하는 상황이 있을 수 있다. 

이럴 땐, 상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달하여 해결할 수 있다. 

 

Effect hook

 

Side Effect

: 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 Side Effect가 있다고 말한다. React에서는 컴포넌트 내에서 fetch를 사용해 API를 정보를 가져오거나 이벤트를 활용해 DOM을 직접 조작할 때 Side Effect가 발생했다고 말한다.

 

let ogu = 'ogu';

function rabbit() {
  ogu = 'rabbit';
}

rabbit(); // rabbit는 side effect를 발생한다.

 

순수 함수

: 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다. 입력으로 전달 된 값을 수정하지 않는다. 

function sum(a, b){
 return a + b
}

sum(5, 9) // 14

 

Math.random()은 랜덤값이 출력되므로 순수 함수가 아니다.
fetch API를 이용해 AJAX 요청을 하는 것은 네트워크 상황, 서버상태에 따라 응답코드가 달라지기 때문에 순수 함수가 아니다.

 

React의 함수 컴포넌트

React의 함수 컴포넌트는 props를 입력으로, JSX Element가 출력으로 나가 순수 함수로 작동하나, AJAX 요청이 필요하거나 타이머, LocalStorage 같은 API를 사용해야 할 때가 있다. 이 side effect를 다루기 위해 Effect Hook을 제공한다.

 

function makeProfile({name, job, like}){
 return <div>
    <div>{name}</div>
    <div>{job}</div>
    <div>{like}</div>
 </div>
}

 

React 컴포넌트에서의 Side Effect 

• 타이머 사용 (setTimeout)
• 데이터 가져오기 (fetch API, localStorage)

useEffect

useEffect의 첫 번째 인자는 함수다. 해당 함수 내에서 side effect를 실행하면 된다.

Effect Hook은 새롭게 컴포넌트가 렌더링 될 때 실행된다.

• 컴포넌트 생성 후 처음 화면에 렌더링(표시)
• 컴포넌트에 새로운 props가 전달되어 렌더링
• 컴포넌트 상태(state)가 바뀌며 렌더랑

Hook 주의점

• 최상위에서 Hook을 호출한다.
• React 함수 내에서 Hook을 호출한다. 

useEffect의 두 번째 인자는 배열이다. 이 배열은 '어떤 값의 변경이 일어날 때'라는 조건을 가지고 있다. 이 배열을 종속성 배열이라 부른다. 이 종속성 배열을 빈 배열로 둘 경우 useEffect는 단 한 번, 처음 생성될 때만 실행된다.

 

 

어려웠던 부분

완벽히 이해한 척 하는 내 모습

이론만 봤을 땐 아! 완벽히 이해했어!를 외쳤는데 정작 코딩을 하니 여기서 사용하는게 맞나..? 하면서 혼란스러움 투성이 ㅠㅠ..

 

 

더 공부할 것

useEffect 실사용 예제