공부기록/[강의노트] Udemy React 완벽가이드 201~300 (11) 썸네일형 리스트형 # 239 [udemy React 완벽 가이드 노트] Redux의 작동방식 core foundation 리덕스의 작동방식 Redux는 중앙 데이터 저장소다. 여기에 애플리케이션의 모든 state를 저장하며, 두개 이상의 저장소를 가지지 않는다. 관리가 어렵지 않은가? 아니다. 저장소를 직접 관리할 필요가 없다. 중앙 저장소에 대한 구독을 설정하고 컴포넌트 안에서 사용하면 데이터의 변경을 컴포넌트에서 인지해 UI를 업데이트 하게 된다. 데이터 변경 방법 컴포넌트는 데이터를 직접 조작하지 않는다. 그대신 리듀서를 사용한다. 리듀서 함수는 데이터 저장소의 데이터를 변경하는 일을 한다. useReducer 훅과는 다르다. Reducer Function 입력을 받아서 입력을 변환하고 줄이는 함수. 입력을 변환해서 새로운 출력, 새로운 결과를 내보낸다 useReducer는 훅이 사용하고, Reducer functio.. # 237 [udemy React 완벽 가이드 노트] 왜 Redux인가? 리덕스란? 컴포넌트 간(cross-component) 또는 앱 전반적 state(app-wide state)를 위한 상태 관리 시스템(state management system) 우리가 state, 즉 우리 애플리케이션을 변경하고 화면에 표시하는 데이터를 관리하도록 도와준다. 리덕스는 우리가 그런 데이터를 다수의 컴포넌트나 심지어 앱 전체에서 관리하도록 도와준다. state의 종류 Local State 데이터가 변경되어 하나의 컴포넌트에 속하는 UI에 영향을 미치는 State 컴포넌트 내부에서 useState와 useReducer로 관리된다. Cross-Component State 다수의 컴포넌트에 영향을 미치는 state prop chain이나 prop drilling이 필요하다 App-Wide Sta.. # 206 [udemy React 완벽 가이드 노트] Input value 가져오기 두가지 방법 (상황에 따른 선택방법) / 두가지 방법에 따른 유효성 검사하기 여기에는 두 가지 방법이 있다. 1. key stroke마다 값들을 state에 저장하기 2. 사용자가 값을 모두 입력했을 때 입력값을 가져오기 방법 1. const SimpleInput = props => { const [enteredName, setEnteredName] = useState(""); const nameInputChangeHandler = event => { setEnteredName(event.target.value); }; const formSubmissionHandler = event => { event.preventDefault(); console.log(enteredName); setEnteredName(""); }; return ( Your Name Submit ); }; 방.. 이전 1 2 다음
