이전 포스트에서 redux의 용어와 개념에 대해서 설명했습니다. 이번 포스트에서는 실제 코드 예제를 살펴보고 어떻게 동작이 되는지 살펴 보겠습니다. 카운터 앱 예제 살펴볼 샘플 프로젝트는 버튼을 클릭 할 때 숫자를 더하거나 뺄 수 있는 작은 카운터 앱입니다. 간단하지만 react + redux 애플리케이션이 어떻게 동작하는지 알 수 있습니다. 이 샘플 프로젝트는 cra의 공식 redux템플릿(github.com/reduxjs/cra-template-redux)을 사용했습니다. redux-toolkit을 사용하여 redux store 및 로직을 만들고 react-redux(react-redux.js.org/)를 사용하여 redux store와 react 컴포넌트를 함께 연결 하는 표준 redux 구조로 구..

이번 장에서는 리덕스를 사용하기 위해 알아야하는 용어와 개념에 대해 알아보겠습니다 state 관리 간단한 react counter 컴포넌트를 살벼보겠습니다. 버튼을 누르면 컴포넌트의 state가 증가합니다 function Counter() { // State: a counter value const [counter, setCounter] = useState(0) // Action: code that causes an update to the state when something happens const increment = () => { setCounter(prevCounter => prevCounter + 1) } // View: the UI definition return ( Value: {count..

이 글은 리덕스 docs를 해석, 요약 한 글입니다(ko.redux.js.org/tutorials/essentials/part-1-overview-concepts) 리덕스 docs에서는 redux essentials(리덕스 핵심)을 살펴본 후 튜토리얼로 진행하는 것을 권장합니다 2탄 - 리덕스를 사용하기 위해 알아야하는 용어 및 개념 redux 기본 핵심 튜토리얼 2탄 - redux 용어 및 개념 이번 장에서는 리덕스를 사용하기 위해 알아야하는 용어와 개념에 대해 알아보겠습니다 state 관리 간단한 react counter 컴포넌트를 살벼보겠습니다. 버튼을 누르면 컴포넌트의 state가 증가합니다 f jcon.tistory.com 3탄 - redux app 구조 redux 강의 기본 핵심 튜토리얼 3탄..

react는 state를 상위 컴포넌트에서 관리하고 해당 state를 하위 컴포넌트 props로 내려주는데 하위 컴포넌트가 많아질 수록 props를 계속 전달하기 때문에 불편해 질 수 있다. context API를 사용하면 이 문제를 해결할 수 있다. context API를 사용하면 모든 컴포넌트가 context에 있는 state를 받을 수 있게 된다. 이번 포스트에서는 useContext와 useReducer를 사용한 예제를 통해 context API 사용 방법을 익혀보자. 개인적으로 이렇게 context와 component는 폴더로 구분해서 사용하는 것을 좋아한다. ├─components | └─Component.jsx ├─context | └─ContextProvider.jsx └─app.js co..

기존 리액트 코드에서 state 객체 안에 input의 값을 추가 할 때 onChange를 통해 값이 생성되면 state안에 키값과 밸류값을 넣도록 만들어 두었었다. // exconst inputHandler = e => { const { name, value } = e.target; setState(...state, ...{ [name]: value }); }; 이런 상황에서 리덕스를 사용할 경우 정의되지 않은 state의 키와 밸류를 추가 할 수 있을지와 의문이 들었다.문제는 리듀서에서 발생을 했다. 리듀서는 action과 state만을 인자로 받기 때문에 [name]의 값을 가져올 수 없었다.이를 해결하려면 action자체를 스프레드(...)하면 되지만 이경우에 action안에 있는 type의 값까..

기존 php 서비스 위에 react를 사용하여 페이지를 만들어야 하는 프로젝트가 생겼다.react-router-dom을 사용하여 react페이지를 만들었는데 qa서버(테스트 서버)에서 history.back 또는 url로 직접 접근하면 404에러가 나오는 문제가 생겼다.php 서비스는 apache위에 떠있었기 때문에 react-router-dom의 url을 apache에서 해석을 함으로써 생긴 문제였다. 예를 들면 react-router-dom을 통해 `/page`와 `/page/1`의 url을 router하고 해당 링크로 가게 되면 apache에서 `/page/index.html` `/page/1/index.html`을 찾기 때문에 404 error가 나타나는 것이었다. 이를 해결하기 위해서는 apac..

자사 홈페이지를 nextjs로 제작을 했다. 프로토 타입이 나온 후에 테스트를 하던 중 ie에서 작동이 안되는 이슈가 있었다. (개발자의 적 ie..) ie의 개발자 도구를 열어서 확인을 해본 결과 ie에서 지원하지 않는 자바스크립트 함수 때문인걸로 추론됐다. 그에 대한 해결책을 찾던 중 polyfill이라는 것을 알게 되었다. Polyfill 이란위키피디아에서는 아래와 같이 설명하고 있다. 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다. 기능을 지원하지 않는 웹 브라우저에서 원하는 기능을 구현할 수 있으나, 폴리필 플러그인 로드 때문에 시간과 트래픽이 늘어나고, 브라우저별 기능을 추가하는 것 때문에 코드가 매우 길어지고, 성능이 많이 저하된다는 단점이 있다. - 위키..

html에 onClick으로 이벤트를 걸었을 때 e.target을 쓰면 하위 태그까지 모든 이벤트가 걸린다. 그에 따라 클릭 이벤트를 건 태그에만 이벤트를 적용하고 싶을 때에는 currentTarget 함수를 사용한다. 예시const event = (e) =>{console.log(e.target)} ... abc e.target을 사용할 경우 a, b, c 를 클릭할 때 a, b, c 태그가 콘솔에 찍히게 된다 예시const event = (e) =>{console.log(e.currentTarget)} ... abc e.currentTarget을 사용할 경우 a, b, c 를 클릭해도 이벤트를 건 태크만 반환이 된다.

웹팩에 대해 이해하기 위해 CRA를 사용하지 않고 설정을 해보았습니다 https://www.valentinog.com/blog/babel 을 의역한 글입니다. 오류가 있으면 알려주세요 React, webpack 및 Babel 설정 방법 : 목차 다음 내용을 다룹니다webpack 설치 및 구성 방법Babel 설치 및 구성 방법React 설치 방법두 개의 React 구성 요소를 만드는 법 ( Container / Presentational )번들을 HTML 페이지에 포함시키는 방법webpack dev 서버를 설치하고 구성하는 방법React, webpack 및 babel 설정 방법 : webpack 설정npm 설정 초기화 1npm init -ycs webpack / webpack-cli 설치 1234npm i..