본문 바로가기

Lesson2

React 완벽가이드 Session 10 모듈 소개 Effects, Reducers & Context "Side Effects"이란 무엇이며 useEffect를 소개합니다 애플리케이션에서 일어나는 모든 것 리액트에서는 state값이 변하는 등의 작업이 일어날 때 리렌더링 됨 만약 사이드 이펙트가 계속 리액트에 관여하게 된다면 무한 루프에 빠질 가능성이 크다. 이것을 해결하기 위한 방법으로 useEffect 가 있다. 1) useEffect : 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook useEffect(()=>{ ...}, [ dependecies]); 첫번째 인자는 함수로, 모든 컴포넌트 평가 후에 실행되어야 하는 함수 두번째 인자 배열이 변경될 때마다 함수가 실행된다. ⓐ 두번째 인자가 빈 배열일 때 useEf.. 2022. 8. 4.
React 완벽 가이드 Session 9 JSX 제한 사항 및 해결 방법 JSX 제한사항 리액트에서 루트 JSX요소는 한 개여야한다.. 해결법은 최상위 태그로 무언가 하나를 만들어서 children으로 넣는것이다. JSX에는 하나를 초과하는 "root" JSX요소를 리턴 할 수 없는 한계점이 있다. 이것은 리액트 자체의 문제가 아니라 JS에서 둘 이상을 리턴 할 수 없어서 발생하는 문제이다. 그림처럼 JSX 코드는 React.createElement로 변환되기 때문에 하나만 사용 할 수 있는 것이다 해결방법 인접한 요소들을 div로 감싸면 된다. 반드시 div여야만 되는 것은 아니고 컴포넌트도 가능하다. 이렇게 div로 감싸는 방식을 선택하게 됐을때 div soup라고 불리는 새로운 문제가 발생하게 된다. 실제 DOM으로 렌더링 될 때 리액트 .. 2022. 8. 3.