TIL/React3 Redux를 쓰는이유 Academind에서 리액트 강의를 수강한 내용을 정리하는 포스팅입니다. https://redux.js.org/ Redux - A predictable state container for JavaScript apps. | Redux A predictable state container for JavaScript apps. redux.js.org Redux 는 리액트와 함께 쓸수 있는 상태관리 라이브러리이다. 리액트로 앱을 만들다 보면 특정 컴포넌트에 있는 상태가 다른 컴포넌트에서 필요하거나 앱 전반적으로 요구되는 경우가 있다. 물론 기본적으로는 props 로 넘겨주면 되지만 특정 컴포넌트가 너무 nesting이 깊게 되어있거나 할 경우 상태정보를 lifting 하는게 여간 힘든일이 아니다. 그래서 기본적.. 2021. 7. 11. 리액트의 작동 방식 Academind 에서 리액트 강의를 수강후 배운내용을 정리하는 포스트입니다. 1. 리액트의 작동방식 리액트 라이브러리는 사실상 크게 2가지로 구성되어있다 볼수있는데 React 그리고 ReactDOM 이다. React 그리고 ReactDOM은 각자 맡는 역할이 다르다. - React는 상태변화를 듣고 컴포넌트들을 관리하는 역할 (=상태변화에 따라 컴포넌트 함수(또는 클래스)들을 실행하여 렌더링 결과가 어떻게 되어야 하는지의 정보(컴포넌트 트리 라고도 할수 있을거다) 관리) - ReactDOM은 React로 부터 기존의 컴포넌트 트리 모습과 현재 상태변화에 따른 컴포넌트트리의 차이점에 대한 정보를 받고 해당 정보를 기반으로 Real DOM을 수정한다. 즉 상태(state)에따라 컴포넌트 함수를 execut.. 2021. 7. 6. 리액트 상태변화와 랜더링 그리고 자바스크립트의 참조형 데이터 오늘은 Academind 에서 리액트 강의를 듣고 실습을 진행 하고 있었다. 그런데 큰 문제가 하나 있었는데.... 아니 분명 useState hooks로 상태를 변화 시켰는데 컴포넌트가 새롭게 렌더링이 되지 않는 것이다. import React, { useState } from "react"; import "./App.css"; import InputCard from "./components/InputCard/InputCard"; import AddedList from "./components/AddedList/AddedList"; let userData = []; function App() { const [submittedData, setSubmittedData] = useState(userData).. 2021. 7. 3. 이전 1 다음
