IT/리액트
-
리덕스 용어와 개념IT/리액트 2022. 8. 16. 17:32
상태 관리 아래는 간단한 카운터 컴포넌트이다. 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: {counter} Increment ) } - State: 앱을 구동하는 근원 - View: 현재 상태를 기반으로 하는 UI의 선언적 설명 - Actions: 사용자의 입..
-
리덕스 시작하기IT/리액트 2022. 8. 16. 00:50
앱 자동생성 npm install @reduxjs/toolkit npx create-react-app my-app --template redux npm install redux 리액트 앱 생성 후 리덕스 적용 npm install @reduxjs/toolkit react-redux Redux Store 생성 리덕스 툴킷에서 configureStore API를 import 빈 리덕스 스토어를 생성하고 export 리덕스 스토어가 생성되고 개발하는 동안 스토어를 검사할 수 있도록 리덕스 devtools 확장도 자동으로 구성됨 import { configureStore } from '@reduxjs/toolkit'; export const store = configureStore({ reducer: { }, ..
-
리덕스란?IT/리액트 2022. 8. 16. 00:42
리덕스의 역할 리덕스는 상태를 관리, 갱신 하고 액션이라 불리는 이벤트를 사용하기 위한 패턴이자 라이브러리이다. 리덕스를 써야하는 이유 - 리덕스는 전역 상태를 관리할 수 있게 도와줌 - 리덕스에서 제공하는 패턴과 도구를 이용해 상태가 언제, 어디서, 왜, 어떻게 변하됐는지 쉽게 이해할 수 있음 - 예측 가능하고 테스트 가능한 코드를 작성할 수 있도록 안내하고, 예상대로 작동할 것이라는 확신을 줌 언제 써야하는가? - 장점: 공유 상태 관리를 처리하는데 도움이 됨 - 단점: 배워야할 개념과 작성해야할 코드가 더 많음. 코드에 간접 참조를 추가하고 특정 제한 사항을 따르도록 요청함. - 그럼 언제 사용해야함? 많은 곳에서 많은 양의 상태가 필요할 때 상태가 자주 갱신될 때 상태를 업데이트하는 로직이 복잡할..
-
리액트 주요개념 - React로 사고하기IT/리액트 2022. 1. 16. 23:54
React는 JavaScript로 규모가 크로 빠른 웹 애플리케이션을 만드는 가장 좋은 방법입니다. 이번 글에서는 React로 상품을 검색할 수 있는 데이터 테이블을 만드는 과정을 살펴볼 것입니다. 목업으로 시작하기 애플리케이션을 설계하기 전 디자이너로부터 JSON API와 목업을 받습니다. // JSON API [ {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"}, {category: "Sporting Goods", price: "$29.99", stocked: false,..
-
리액트 주요개념 - 합성 vs 상속IT/리액트 2022. 1. 16. 20:34
React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋습니다. 컴포넌트에서 다른 컴포넌트를 담기 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 많습니다. 특히 범용적인 박스 역할을 하는 Sidebar 또는 Dialog와 같은 컴포넌트에서 흔히 볼 수 있습니다. 이러한 컴포넌트에서는 특수한 children prop을 사용하여 자식 엘리먼트를 출력하여 그대로 전달하는 것이 좋습니다. function FancyBorder(props) { return ( {props.children} ) } 이러한 방식으로 다른 컴포넌트에서 JSX를 중첩하여 임의의 자식을 전달할 수 있습니다. function WelcomeDialog(..
-
리액트 주요개념 - State 끌어올리기IT/리액트 2022. 1. 16. 19:28
동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 때가 온다면 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋습니다. 예제: 주어진 온도에서 물의 끊는 여부를 추정하는 온도 계산기 BoilingVerdict: 섭씨온도를 의미하는 celsius prop를 받아 물이 끓기에 충분한 온도인지에 대한 여부를 출력 function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water would not boil. } Calculator: 온도를 입력할 수 있는 을 렌더링하고 그 값을 this.state.temperature에 저장, 현재 입력값에 대한 BoilingVe..
-
리액트 주요개념 - 폼IT/리액트 2022. 1. 16. 01:32
제어 컴포넌트 (Controlled Component) JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근 할 수 있도록 도와주는 기술 HTML에서 폼 엘리먼트(input, select, textarea, ..)는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. 그러나 React에서는 변경할 수 있는 state가 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. 이때 React state를 신뢰가능한 단일 출처(single source of truth)로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어할 수 있고 이러한 방식으로 React에..
-
리액트 주요개념 - 리스트와 keyIT/리액트 2022. 1. 16. 01:22
여러개의 컴포넌트 렌더링하기 엘리먼트 모음을 만들고 중괄호를 이용해 JSX에 포함시킬 수 있습니다. const numbers = [1,2,3,4,5]; const listItems = numbers.map((number) => {number} ); map() 함수를 사용해 numbers 배열을 반복 실행하면서 각 항목을 엘리먼트로 반환하고 listItem에 저장합니다. function ListAndKey() { return ( {listItems} ) } listItem 배열을 엘리먼트 안에 포함하여 반환합니다. (저는 새로운 .js 파일을 생성하고 index.js 에서 호출하는 방식으로 코드를 작성했습니다.) 기본 리스트 컴포넌트 일반적으로 리스트 렌더링은 컴포넌트 안에서 이루어집니다. 위의 코드를 리..