제로하우스

Redux vs Recoil Redux와 Recoil는 React의 상태관리 라이브러리이다. redux는 Flux 아키텍쳐 기반 recoil은 Atomic 모델 기반 각각의 특성과 차이점을 비교해본다. Redux Flux 아키텍쳐 기반 라이브러리로, 데이터 흐름은 단방향이다. Action: action(type, payload)을 생성하여 이를 dispatcher에게 전달 Dispatch: 모든 action을 전달받아 store에 전달 Store: state를 가지고 있고 state를 변경 (state 변경 시 change 이벤트가 발생하면서 view에게 state가 변경되었다는 것을 알려줌) redux는 중앙집중식으로 상태관리가 이루어진다. Recoil Recoil은 페이스북에서 만든 Context A..

Recoil이란? Recoil은 React를 위한 상태 관리 라이브러리이다. 설치하기 Recoil 패키지는 npm에 존재한다. npm install recoil RecoilRoot recoil을 사용하는 컴포넌트는 부모 트리에 RecoilRoot가 필요하다. 보통은 루트 컴포넌트에 RecoilRoot를 넣는다. import React from 'react import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue } from 'recoil' function App() { return ( ) } Atom Atom은 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌트들은 암묵적으..

JavaScript에서의 문자열 줄바꿈 JavaScript에서는 문자열을 줄바꿈을 하기 위해 다음과 같이 방법을 사용하였다. (참고 링크) 개행 문자(\n) Template Literal 하지만 React에서는 줄바꿈이 동작하지 않는다. 줄바꿈 태그 ( ) 줄바꿈 태그를 사용해도 태그가 문자 그대로 출력된다. 동해물과 백두산이 마르고 닳도록 React에서의 문자열 줄바꿈 React에서는 문자열을 줄바꿈하기 위해 개행 문자(\n)를 사용한 후 CSS 상에서 white-space: pre-wrap을 설정해주면 된다. white-space: pre-wrap 여기서 pre-wrap 대신 pre-line을 사용할 수도 있는데 차이점은 다음과 같다. pre-wrap: 연속 공백 유지 pre-line: 연속 공백을 ..

Overview 공식 문서 Vuex와 마찬가지로 상태 관리를 위한 라이브러리 클라이언트 앱의 복잡성을 제어하기 위한 하나의 state 제어 수단 Redux와 React contextAPI는 언제 사용하면 좋을까? React contextAPI: 컴포넌트의 통합 데이터를 관리하는 경우 Redux: 서버에서 가져온 데이터로 새로운 결과물을 만드는 경우 시작하기 React 프로젝트 시작 단계인 경우 $ npx create-react-app --template redux React 프로젝트 진행 단계인 경우 Redux를 프로젝트에 추가한다. $ npm i redux Redux를 React 프로젝트에 추가한다. $ npm i react-redux Chrome 확장 프로그램 설치와 연동하기 위해 tool kit을 ..

Event Handling React의 이벤트 처리 방식은 DOM의 방식과 유사하나, 몇 가지의 문법 차이가 존재한다. 이벤트는 camelCase를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 event handler(이벤트 처리 함수)를 전달한다. Event // React 방식 Event Event onChange , , 와 같은 form 엘리먼트에서는 사용자의 입력 값을 제어하는데, 이렇게 값이 변경될 때 발생하는 이벤트이다. onChange 이벤트가 발생하면 event.target.value를 통해 이벤트 객체에 담겨 있는 iput 값을 가져올 수 있다. function NameForm () { const [name, setName] = useState("") const handleChang..