Persistence

Case 1 - dependency array 없이 data fetch const [data, setData] = useState(); useEffect(async () => { const result = await something; setData(result.data); }) 문제점: 데이터를 불러온 후 setData를 하고 있기 때문에 리렌더링되고, 그러면 useEffect이 또 실행되므로 무한 루프가 발생한다. Case2 - dependency array 있이 data fetch const [data, setData] = useState(); useEffect(async () => { const result = await something; setData(result.data); }, []) 개선..

문제 상황 material-ui의 drawer 컴포넌트를 사용하고 있음 부모 컴포넌트(검색 결과를 리스트로 보여주는 페이지)가 자식 컴포넌트인 drawer에게 state(인원 수)를 넘겨줌. drawer는 부모 컴포넌트로부터 받은 인원 수로 state를 초기화하고, drawer내에서 인원 수를 변동시킬 수 있음. drawer 내에서 인원 수를 변동시킨 다음 저장 버튼을 누르면 drawer가 닫히면서 바뀐 인원 수로 검색 api 재호출하여 그 결과를 부모 컴포넌트인 리스트 페이지에 렌더링함. 그런데 문제는 api call이 백그라운드에서 진행되고 있을 때, drawer를 열어서 인원 수를 조작하고 있는 상황에서, api 호출이 끝나고 리스트가 렌더링되면, drawer에서 조작하고 있던 인원 수가 다시 초기..

부모 컴포넌트에서 count라는 state를 갖고 있고 이를 prop를 내려줄 때, 자식 컴포넌트에서 이를 받아 state의 초기값으로 삼았다고 하자. 이후, 부모 컴포넌트에서 갖고 있는 count 값이 변동된다면 자식 컴포넌트가 표시하고 있는 state는 어떻게 될까? 변하지 않는다. 그 이유는 컴포넌트 생성자(constructer)는 컴포넌트가 마운트될 때 한 번만 실행되기 때문이다. constructer는 this.state의 초기값 적용, 인스턴스에 이벤트 처리 메서드를 바인딩 하기 위해 사용한다. class ChildComponent extends Component { constructer() { super(props); this.state = { count: this.props.value };..

useEffect Hook 사용하기 useEffect 훅은 함수형 컴포넌트에서 쓰이며 기존 클래스 컴포넌트의 라이프사이클 메서드들을 대체한다. 이를 정리하기 위해 간단히 라이프사이클 메서드를 설명하고, useEffect 훅의 효용을 적는다. LifeCycle Method - componentDidMount, componentDidUpdate 생명주기 메서드는 크게 두 종류이다. Will 메서드 : 어떤 작업이 실행되기 직전에 호출 Did 메서드 : 어떤 작업이 실행된 직후에 호출 생명주기 메서드에서는 Mount라는 단어가 등장하는데, 여기서 마운트는 리액트가 컴포넌트를 실제 DOM에 삽입한다는 것이다. (리액트는 가상DOM을 사용하니까) 예를 들어 componentDidMount는 컴포넌트가 실제 DOM..