Seungsu Hwang

React-redux 리덕스의 상탯값은 불변 객체입니다. 상탯값이 불변 객체이면 값의 변경 여부를 빠르게 확인할 수 있고, 이는 리액트의 렌더링 선능을 좋게 만드는 요인이 됩니다. 리액트에서 리덕스를 사용할 때 react-redux 패키지를 사용하지만, 없이도 리덕스를 사용할 수 있습니다. 먼저 react-redux 패키지 없이 간단한 프로그램을 만들어보고, react-redux 패키지를 사용해 리팩터링 해보도록 하겠습니다. 1. react-redux 패키지 없이 직접 구현하기 먼저 react-redux가 하는 일을 이해하기 위해 패키지의 도움 없이 리덕스를 리액트에 적용하는 코드를 직접 작성해보겠습니다. 우선 Redux #1에서 작성했던 index.js 파일의 스토어 객체를 별도의 파일로 분리하겠습니다..

데이터 종류별로 상탯값 나누기 프로그램의 규모가 커지면 프로그램의 모든 액션을 하나의 파일에 작성하거나 모든 액션 처리 로직을 하나의 리듀서 함수로 작성할 수는 없다. 이럴 때 리덕스에서 제공하는 combineReducer 함수를 이용하면 리듀서 함수를 여러 개로 분리할 수 있다. 먼저 프로젝트 진행을 위해 create-react-app을 통해 폴더를 하나 만들자. (+ 현재 create-react-app이 5.0.0으로 업데이트 되면서 아래 명령이 정상적으로 실행되지 않는다. npx clear-npx-cache를 먼저 입력하고 다시 아래 명령을 입력하면 정상적으로 작동한다. 참조: https://exerror.com/you-are-running-create-react-app-4-0-3-which-is-..

클래스형 컴포넌트 사용법 저번 #1에서는 클래스형 컴포넌트의 기본적인 생명 주기 메서드에 대해 살펴보았습니다. #2에서는 조금 더 실전적인 내용들을 다루도록 하겠습니다. setState 메서드 이해하기 setState는 클래스형 컴포넌트에서 상탯값 변경을 위해 호출되는 메서드입니다. setState 메서드로 입력된 객체는 기존 상탯값과 병합됩니다. 또한 setState 메서드는 비동기로 상탯값을 변경합니다. 따라서 setState 메서드가 처리된 시점을 알고 싶을 때는 두번째 매개변수로 처리 완료시 호출할 콜백함수를 입력할 수 있습니다. 또한 setState 메서드는 비동기적으로 처리되기 때문에 연속해서 호출하면 한번만 실행됩니다. 아래는 그 예제입니다. export default class MyComp..

클래스형 컴포넌트 리액트에서는 훅이 등장하면서 클래스형 컴포넌트를 작성할 일이 없어졌습니다. 앞으로 신규 프로젝트를 진행할 경우에도 클래스형 컴포넌트를 이용하기 보단 훅을 이용한 함수형 프로그래밍을 하는 것이 더 좋습니다. 하지만 기존에 클래스형으로 프로그래밍된 코드들을 유지보수 하려면 클래스형 컴포넌트에 대한 이해도 역시 필요합니다. 생명 주기 메서드 모든 컴포넌트는 다음과 같이 세 단계를 거칩니다. 각 단계에서는 몇 개의 메서드들이 정해진 순서대로 호출됩니다. 이 메서드들을 생명 주기 메서드라고 하는데, 어떤 기능이 있고 어떤 경우에 사용되는지 차근차근 알아보도록 하겠습니다. 초기화 단계 constructor(props) static getDerivedStateFromProps(props, state..