리액트스터디 [React] 리액트를 다루는 기술 - 12장 immer를 사용하여 더 쉽게 불변성 유지하기 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있다. 하지만 객체의 구조가 복잡하고 깊어질수록 불변성을 유지하며 컴포넌트를 업데이트 하는 것이 매우 힘들어진다. 이런 경우 사용할 수 있는 라이브러리로 immer라는 것이 있다. npm add immer로 라이브러리를 설치해 주고, 사용 방법을 알아보자. immer의 produce 함수의... React리액트스터디frontendReact [React] 리액트를 다루는 기술 - 11장 컴포넌트 성능 최적화 그럴 때 쓸 수 있는 것이 바로 React.memo 함수이다. TodoListItem 컴포넌트를 React.memo()로 감싸줌으로써 todo, onRemove, onToggle이 바뀌지 않으면 리렌더링을 하지 않도록 만들었다. setTodos를 사용할 때 새로운 상태를 파라미터로 넣는 대신, 상태 업데이트를 어떻게 할지 정의해 주는 업데이트 함수를 넣을 수도 있는데, 이를 함수형 업데이트라... React리액트스터디frontendReact [React] 리액트를 다루는 기술 - 5장 ref: DOM에 이름 달기 정리 가끔은 이처럼 state만으로는 구현할 수 없는 기능들이 있다. 콜백 함수를 통한 ref 설정 ref를 만드는 가장 기본적인 방법은 콜백 함수를 사용하는 것이다. ref의 이름은 원하는 것으로 자유롭게 지정할 수 있다. 리액트에 내장되어 있는 createRef 함수를 사용할 수도 있다. 그리고 해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣어 주면 ref 설정이 완료된다... React리액트스터디frontendReact [React] 리액트를 다루는 기술 - 13장 리액트 라우터로 SPA 개발하기 이를 라우팅이라고 하는데, 리액트 라우터 라이브러리를 사용해서 구현할 수 있다. About.js '/about' 경로가 '/' 규칙에도 일치하기 때문에 발생한 현상이므로 Home을 위한 Route 컴포넌트를 사용할 때 exact라는 props를 true로 설정해야 한다. 위와 같이 path의 props를 배열로 설정해 주면 여러 경로에서 같은 컴포넌트를 보여 줄 수 있다. /profile/d... React리액트스터디frontendReact [React] 리액트를 다루는 기술 - 8장 Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 아래는 위 useState 예제에 useEffect를 추가한 코드이다. useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트될 때는... 리액트스터디frontendReactReact
[React] 리액트를 다루는 기술 - 12장 immer를 사용하여 더 쉽게 불변성 유지하기 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있다. 하지만 객체의 구조가 복잡하고 깊어질수록 불변성을 유지하며 컴포넌트를 업데이트 하는 것이 매우 힘들어진다. 이런 경우 사용할 수 있는 라이브러리로 immer라는 것이 있다. npm add immer로 라이브러리를 설치해 주고, 사용 방법을 알아보자. immer의 produce 함수의... React리액트스터디frontendReact [React] 리액트를 다루는 기술 - 11장 컴포넌트 성능 최적화 그럴 때 쓸 수 있는 것이 바로 React.memo 함수이다. TodoListItem 컴포넌트를 React.memo()로 감싸줌으로써 todo, onRemove, onToggle이 바뀌지 않으면 리렌더링을 하지 않도록 만들었다. setTodos를 사용할 때 새로운 상태를 파라미터로 넣는 대신, 상태 업데이트를 어떻게 할지 정의해 주는 업데이트 함수를 넣을 수도 있는데, 이를 함수형 업데이트라... React리액트스터디frontendReact [React] 리액트를 다루는 기술 - 5장 ref: DOM에 이름 달기 정리 가끔은 이처럼 state만으로는 구현할 수 없는 기능들이 있다. 콜백 함수를 통한 ref 설정 ref를 만드는 가장 기본적인 방법은 콜백 함수를 사용하는 것이다. ref의 이름은 원하는 것으로 자유롭게 지정할 수 있다. 리액트에 내장되어 있는 createRef 함수를 사용할 수도 있다. 그리고 해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣어 주면 ref 설정이 완료된다... React리액트스터디frontendReact [React] 리액트를 다루는 기술 - 13장 리액트 라우터로 SPA 개발하기 이를 라우팅이라고 하는데, 리액트 라우터 라이브러리를 사용해서 구현할 수 있다. About.js '/about' 경로가 '/' 규칙에도 일치하기 때문에 발생한 현상이므로 Home을 위한 Route 컴포넌트를 사용할 때 exact라는 props를 true로 설정해야 한다. 위와 같이 path의 props를 배열로 설정해 주면 여러 경로에서 같은 컴포넌트를 보여 줄 수 있다. /profile/d... React리액트스터디frontendReact [React] 리액트를 다루는 기술 - 8장 Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 아래는 위 useState 예제에 useEffect를 추가한 코드이다. useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트될 때는... 리액트스터디frontendReactReact