react - 데이터 흐름의 이해와 비동기 요청 처리 보충 내용

리액트 - 데이터 흐름 이해와 비동기 요청 처리 보충 내용

리액트의 핵심 키워드 및 주요 용법

<핵심 키워드>

1. 컴포넌트 기반
2. 단방향 데이터 흐름
3. lifting state up(상태 끌어올리기)
4. side effect 방지를 위해 → useEffect (최소한으로 쓸 것)

 

개발자는 절차적으로 코드를 작성해야 하는데,
개발자도 유저가 생각하는 방식으로 심플하게 생각할 수 없을까?

→ 절차적으로 코드는 짜되, 다 작성하고 나면 이런식으로 사용하게 생각해보자

→ 리액트

 

리액트로 사고하기: https://ko.reactjs.org/docs/thinking-in-react.html
를 항상 생각해서 하자!(항상 참고!)

 

함부로 상태 변경이나 외부 side effect 받지 않게 하자
→ 하향식, 단방향 데이터 흐름으로 작성

상태 직접 변경 않기
tweets.push(newTweet) (x)
→ setTweet(newTweet) (o)

props 수정 (x)
→ lifting state up 사용 (o)

useState 보충 내용

useState의 두번째 요소인 setXXX 함수를 통해 상태를 변경할 수 있다

const [flight, setFlight] = useState([]);
// 첫번째 요소가 변화하는 상태, 두번째 요소가 이 상태(state)를 변경시키는 setXXX함수

 

어떤 A 컴포넌트에서 B 컴포넌트로 상태를 전달할 때, 어디에서 useState 를 놓아야 하는가?
→ A, B 컴포넌트를 공통으로 가지는 상위 컴포넌트(부모)에서 useState 를 사용해야 하고, 여기서 상태 끌어올리기를 시전하자!

ex)
Search 컴포넌트에서 FlightList 컴포넌트로 상태를 전달해야 하는데
이를 위해 이 2개의 공통 컴포넌트를 가지는 상위 컴포넌트인 Main에서
처리하도록 하자(상태 끌어올리기)

 

개발자 도구- 컴포넌트(리액트 디벨로퍼 앱)을 이용해서 직관적으로 컴포넌트 구조를 볼 수 있다!

<암기하면 좋은 내용>

Input 엘리먼트 쓰면 → value, onChange 프로퍼티(속성) 넣는거 생각할 것! 

구조 분해 할당

구조 분해 할당의 예시

...

const search = ({ departure, destination }) => 
    // obj.departure, obj,destination 의 뜻이라 보면 된다
    // 객체의 구조를 분해해서 할당하는 것
    // obj의 속성인 departure, destination만 구조 분해해서 가져 온 것!
    // 딱 원하는 부분만 오려서 가져오듯이!

      console.log(“departure”, departure, “destination”, destination)
    // departure: undefined , destination: undefined

    console.log(departure: “ICN”, destination: “JEJ”)
    // departure: “ICN”, destination: “JEJ”

  }

...

 

데이터 요청과 side effect

<데이터 가져오는 3가지의 예시>

1. 더미 데이터 ← react 기초
2. 로컬 스토리지 ← side effect 가 됨(javascript 코드에는 없는거; `브라우저`에 존재한다)
3. HTTP API ← 서버

side effect 를 생각할 때는 그 주체를 생각해야 한다.

→ 우리 입장에서는 로컬 스토리지면 로컬 아니냐 싶은데, 로컬 스토리지는 브라우저에서 가져오는 것
→ 리액트 입장에서는 외부에서 가져오는 것이니깐 불안하다?
→ side effect로 본다

Effect Hook에 대한 보충 설명

리액트는 함수형 프로그래밍을 지키려고 노력한다
→ 순수 함수(같은 input에 대한 output이 늘 같은 함수)

 

side effect만 예외인데, 이를 어디선가 다뤄줘야 한다
→ 리액트에서는 이 것을 useEffect Hook로 관리하는 것!

 

useEffect 주의할 점!
→ 의존성 배열을 주의해야 함!
(1.배열이 아예 없는 경우, 2. 배열이 있는데 빈배열인 경우, 3. 그 요소의 값이 존재하는 배열인 경우)

 

useEffect 와 AJAX 요청(fetch API)를 사용한 컴포넌트의 예시

Main 컴포넌트가 Search 컴포넌트, FlightList 컴포넌트를 자식으로 가지고, 외부 API인 FligthtDataApi를 통해서
Side Effect(useEffect Hook)을 처리하는 구조이다.

FligthtDataApi 는 내부에서 AJAX 요청(fetch API)을 하도록 설계되었다

 

Search 컴포넌트는 FlightList 컴포넌트에 특정 상태값(검색 조건에 따른 결과값) 을 전달해야 하는데,
이를 위해 두 컴포넌트의 부모 컴포넌트인 Main 컴포넌트에서 상태 끌어올리기를 통해 전달하도록 작성하였다.

 

→ Main 컴포넌트에서 search 함수를 Search 컴포넌트에 onSearch props에 담아서 전달
→ 또한, 그 검색 조건에 따라 AJAX 요청을 하므로 FligthtDataApi 를 통해서 그 결과값이 FlightList에 전달됨을 유념

 

관련 코드 내용은 아래에...

https://github.com/racyde/im-sprint-statesairline-client