TIL - 21.08.02 👨‍💻

React

React는 top-down 형식의 단방향 데이터 흐름을 가지고 있으나 state 끌어올리기 (Lifting State Up)으로 부모 컴포넌트의 state를 변경할 수 있다.

이 끌어 올리기의 요점은 부모 컴포넌트 내에서 state를 변경시키는 함수를 만들고 그 함수를 props로 자식 컴포넌트로 전달 하는 것이다.

State 판별

• 부모로부터 props를 통해 전달 되는가?
• 시간이 지나도 변하지 않는가?
• 컴포넌트 안 다른 state나 props로 계산이 가능한가 ?

-> 하나라도 Yes라면 state로는 부적합하다.

Side Effect ( 부수효과 )

• useEffect Hook -> 두번째 인자 자리에 어떤 state가 변할때 Effect Hook의 콜백함수를 실행할 지정가능 가능하다.
  배열 형태로 변수를 요소를 넣으며, 이 두번째 요소를 종속성 배열이라 한다.

• 함수 내 어떤 구현이 '외부에' 영향을 미치면 Side Effect가 있다고 한다.

• Pure Function
  순수함수는 함수의 입력만이 함수의 결과에 영향을 주는 함수이다.
  어떤 전달인자가 주어지면 항상 같은 값을 반환하기에 예측 가능한 함수이다.

• fetch API
  fetch를 사용하고 메소드를 따로 지정하지 않으면 GET 메소드로 API를 읽어온다.

isLoading

const func1 = ()=>{
  const [isLoading, setIsLoading] = useState(true);
  useEffect(()=>{
  setTimeout(5000, setIsLoading(false))
  },[])
  return <>
    {isLoading ? <div>Loading..</div> : <div> done! </div>}
    </>
}

이런식으로 스테이트를 사용해서 로딩중에 로딩중이라는 것을 가시적으로 보여주는 화면을 렌더할 수 있다.

TO DO 🔥

• 리액트 복습

Retrospect 🧐

오늘 오랜만에 리액트를 만났다.
다행히 블로그 포스팅의 힘인지 모르겠지만 대부분 기억이 나서 오늘 스플린트에서 큰 어려움은 없었다.
내일 페어시간에 할 스플린트까지 끝내놨는데, 내일은 밀린 리액트 복습을 달려볼까 고민중이다.