리액트스터디 [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] 리액트를 다루는 기술 - 7장 컴포넌트의 라이프사이클 메서드 가끔 컴포넌트를 처음으로 렌더링할 때나 컴포넌트가 업데이트될 때 어떤 작업을 처리해야 하는 경우가 있다. constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드 componentDidMount: 컴포넌트가 웹 브라우저 상에 나타난 후 호출하는 메서드 컴포넌트의... 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] 리액트를 다루는 기술 - 7장 컴포넌트의 라이프사이클 메서드 가끔 컴포넌트를 처음으로 렌더링할 때나 컴포넌트가 업데이트될 때 어떤 작업을 처리해야 하는 경우가 있다. constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드 componentDidMount: 컴포넌트가 웹 브라우저 상에 나타난 후 호출하는 메서드 컴포넌트의... React리액트스터디frontendReact