[SEB FE 44] useEffect 적용

✍ 복습 자료

• useEffect를 사용하는 이유?

  코드를 간단하게 줄여준다.
  렌더링 시 발생하는 side effect를 방지할 수 있다.

  • useEffect(() => {})
    화면이 렌더링 될 때마다 실행된다. => 이렇게 코드를 작성하는 경우는 거의 없다.
    
    
  • useEffect(() => {},[])
    렌더링 후 딱 한번만 실행
    
    
  • useEffect(() => {},[x])
    렌더링 후 한번 실행되고, x가 바뀔 때마다 실행

• 로딩 화면 구현

1. useState

   const [loading, setLoading] = useState(false);

2. useEffect

   useEffect(async() => {
      setLoading(true); // 데이터를 받아오기 전에는 loading true
      setFlightList(await getFlight(condition));
      setLoading(false); // 데이터를 받아오고 나서 loading false
    }, [condition]);

   
   

3. render

   // true : LoadingIndicator 컴포넌트를 보여주고 
   // false : FlightList 컴포넌트를 보여준다.
   {loading ? <LoadingIndicator /> : <FlightList list={flightList} />} 

Reference

• useEffect를 사용하는 이유
  https://velog.io/@yoongja/REACT-useEffect%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0
• Hooks를 사용하는 이유
  https://fomaios.tistory.com/entry/React-Native-Hooks%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-feat-%EC%9E%A5%EC%A0%90
• async await 사용하는 이유
  https://velog.io/@jomo34/%EC%8A%A4%ED%84%B0%EB%94%94-JS-async-await%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0feat.-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC