말은 쉽지, 코드를 보여줘!

관련 코드는 아래를 참고 하도록 한다. github.com/mypiece/react-example mypiece/react-example CRA 리액트+리덕스+리덕스사가 예제. Contribute to mypiece/react-example development by creating an account on GitHub. github.com 리덕스의 개념 자체는 아래와 같이 그리 어렵지 않다. 상태 저장을 위한 스토어가 있고 컴포넌트에서는 여기에 있는 특정 상태를 구독한다. 초기상태와 이를 변경하는 액션타입을 미리 정의해놓고 이를 토대로 액션을 만들어줄 액션생성함수도 미리 만들어놓고 사용한다. 상태를 변경하기 위해 디스패치를 통해 액션 발생되면 리듀서에서는 이를 감지해서 상태를 업데이트 한다. 다만 이를..

jQuery 라면 selector로 Element를 찾아서 직접 DOM을 조작해야 한다. 하지만 리액트는 실제 DOM 변경 전에 내부적으로 가상 DOM이라는 개념이 사용되기 때문에 직접적으로 DOM을 조작하지 않고 HTML과 비슷한 JSX 문법을 통해 View를 정의하되 특정 상태값에 따라 컴포넌트를 어떤식으로 렌더링할지 선언하는 방식이다. 이러한 상태와 컴포넌트는 옵저버 패턴처럼 연결되어 있어서 컴포넌트는 참조하는 상태값의 변화할때마다 자동으로 리렌더링 된다. 렌더링 과정에서 내부적으로 가상DOM 에 페이지 자체를 새로 만들고 실제 DOM 과 비교하여 변경된 부분만 적용한다. 리액트에서는 이를 위한 상태관리가 필요하다. 이러한 상태는 기본적으로 State 가 있는데 이는 컴포넌트 내부에서만 사용되는 상..