LEO Devlog LEO Devlog

Lifting State Up ✔️ props로는 상위에서 하위 컴포넌트로밖에 전달되지 못하기 때문에 하위 컴포넌트에서 state를 통해 상위 컴포넌트의 내용을 변경할 수 있다. props는 상위 -> 하위 컴포넌트로 전달하는 값이고, 하위에서는 객체로 받는다. Effect Hook ✔️ 리액트에서 순수 함수(only 함수의 입력만이 함수의 결과에 영향을 주는 함수)만 있는 것이 아니기 때문에 side effect가 발생한다. 발생되는 경우는 fetch를 이용해 외부 데이터를 이용하거나, localStorage에서 데이터를 받거나 setTimeOut과 같은 타이머를 사용할 때 등 발생된다. useEffect를 사용하여 side effect를 처리할 수 있는데, 최상위에서만 Hook을 호출하고, React..

Effect Hook Side Effect ✔️ Side Effect(부수 효과)는 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우의 해당 함수를 말한다. 순수 함수(Pure Function)는 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 말한다. 이 경우는 Side Effect가 발생되지 않는다. 그렇다면, Side Effect가 발생되는 경우는 언제일까? fetch를 이용해 외부 데이터를 받아오는 경우 LocalStorage에서 데이터를 받아오는 경우 setInterval, setTimeOut을 사용하는 경우 // 타이머 사용 useEffect는 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 Hook이다. 최상위에서만 Hook을 호출한다. React 함수 내에서 Ho..

State 끌어올리기 (Lifting State Up) 단방향 데이터 흐름에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다. 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 모른다. 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다. 단방향 데이터 흐름에 대해서 알아보자 -> 단방향 데이터 흐름을 사용하지 않으면 매번 기능 변경 사항에 대해서 코드를 계속 작성해야 된다. -> 코드의 흐름을 알기 쉽다. 복잡하지 않게 된다. -> 컴포넌트의 중요한 상태만 잘 관리하면 아래에서 UI가 자동으로 변경된다. props는 상위에서 하위 컴포넌트로 전달하는 값이고, 하위에서는 객체..