728x90 반응형 React3 [React] Redux (+Redux Toolkit) 03_Redux 3-1. What is Redux? 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템 상태의 종류 Local State 데이터가 변경되어 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태 ex) 토글버튼, 입력필드 .. useState() , useReducer() 로 관리 Cross-Component State -> Redux 로 관리 다수의 컴포넌트에 영향을 주는 상태 ex) 모달 컴포넌트 prop chains, prop drilling 으로 관리 App-Wide State -> Redux 로 관리 애플리케이션의 모든 컴포넌트에 영향을 주는 상태 ex) 사용자 인증 상태 prop chains, prop drilling 으로 관리 3-2. Why use Redux? 기존 .. 2023. 7. 23. [React] State - 동적 상태 관리 / 생명주기 / 데이터 전달 02_State state? 일반적으로 props와 같은 javascript 객체 props와의 차이점 props : (함수 매개변수처럼) 컴포넌트에 전달 state : (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리 React로 개발된 소스 코드 내에서 데이터 교환 및 이벤트 등을 동적으로 처리해줄 수 있도록 해줌 Event 생성 예제 const Component = (props) => { // btnVal : 화면에 표시되는 button의 라벨명 let btnVal = props.btnVal; // 기존 props.btnVal에 할당된 값이 'Before-Changing'이라 가정 // 버튼에서 onClick시 호출될 함수 정의 const clickHandler = () => { c.. 2023. 7. 20. [React] Start React 주요 공부 사항 (POINT!) component 생명주기 흐름 이해 Hook 함수 index.js에서 렌더링하여 호출함 index.css index.html => id에 선언된 root를 index.js 에서 호출하여, 렌더링 목록의 대상이 됨 JPX (JavaScript XML) jpx란 ? javascript 확장 문법 React의 element를 생성 -> javascript로 변환되어 브라우저에 적용됨 화면 개발을 위해 html과 javascript를 편하게 사용할 수 있음 => 아래와 같이 간단하게 선언 후, react에서 부과적인 코드들을 뒷단에 추가하여 browser에 보여줌 function App() { return ( Let's get started! visible ); } Co.. 2023. 7. 20. 이전 1 다음 728x90 반응형
