반응형 개발/React52 useEffect 특징 useEffect useEffect는 sideEffect를 다루는 훅이다. 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다. 다음은 전역변수 foo를 bar라는 함수가 수정하는 예제이다. let foo = 'hello'; function bar() { foo = 'world'; } bar(); // bar는 Side Effect를 발생시킵니다! 보통 리액트를 통해 애플리케이션을 제작할 때, AJAX 요청이 필요하거나, Local Storage 또는 타이머 같은 리액트와 상관없는 API를 다루는 상황이 온다. 이는 리액트 입장에서 전부 Side Effect 이다. 리액트는 Side Effect를 다루기 위해 Effect Hook을 제공한다. u.. 2022. 1. 1. 리액트에서 불변성이 중요한 이유 리액트에서 불변성이 중요한 이유 원본을 변경하지 않으면, 복잡도를 낮출 수 있고 변화감지가 쉽다. 불변성을 이야기하기 전에 컴포넌트가 리렌더링 되는 조건을 살펴보면 다음과 같다. 리렌더링 조건 state가 변경될 때 - state가 변경될때마다 리렌더링된다. props가 업데이트 될 때 - props가 업데이트 되면 리렌더링된다. 부모 컴포넌트가 리렌더링될때 - props나 state가 변하지 않더라도 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링된다. 불변성 위의 내용에서 state,props 가 변하거나 부모 컴포넌트가 리렌더링 될 때 컴포넌트가 리렌더링 되는 것을 알 수 있다. 정리하면 state,props, 부모컴포넌트가 변할 때 리렌더링된다. 이때 변화감지를 쉽게하는 리액트의 규칙이 바로.. 2021. 12. 31. 리액트에서 map을 이용한 렌더링을 할 때 key에 대해 알아야 할 내용, index는 지양하자. Key를 할당하지 않았을때 나오는 경고 function CommentTemplate({ commentDummy, contentId }) { return ( {commentDummy.map((comment) => { return ( //아래와 같이 key를 할당해야 하는 이유 ); })} ); } 위의 코드는 map메소드를 이용하여 배열의 요소를 HTML엘리먼트로 매핑한 모습이다. 만약 key를 할당하지 않는다면, 그러니까 다음과 같이 작성하면 다음과 같은 경고가 발생한다. return ( //아래와 같이 key를 할당하지 않는다. 2021. 12. 31. 리액트 리액트 특징 정리 리액트에서의 데이터는 위에서 아래로만 흐른다. 리액트에서의 데이터 흐름은 트리구조에 의거하여 하향식으로 흐른다. (단방향 흐름이라고도 한다.) 데이터를 전달하는 주체는 부모컴포넌트이다. 부모컴포넌트는 데이터를 props로 자식컴포넌트에게 전달한다. 컴포넌트는 props를 통해 전달받은 데이터의 출처를 알지 못한다. 부모컴포넌트가 자식컴포넌트에게 데이터를 전달하는 '하향식 전달 방식'은 아주 중요하다. 리액트를 대표하는 설명중 하나가 'One way data flow'일 정도이다. State는 최소화할수록 좋다. 또한 모든 데이터를 state로 둘 필요는 없다. 사실 state는 최소화하는 것이 좋다. state 변화가 렌더링을 일으키기 때문이다. state로 저장하지 않아도 되는 것을 .. 2021. 12. 31. 이전 1 ··· 8 9 10 11 12 13 다음 반응형
