2장 useState 훅으로 컴포넌트 상태 관리하기
참고
React?
=> 현재 상태를 활용해 UI를 렌더링한다.
상태가 변경
=> 리액트는 UI를 다시 렌더링
Hook?
컴포넌트 내의 값을 추적하고 상태와 UI를 동기화하기 위해 사용
useState
훅을 호출하면 최신 상태 값을 반환하면서 값을 변경
갱심함수를 반환한다.
const [selectedRoom, setSelectedRoom] = useState(initialValue);클래스 컴포넌트 방식
class statesList extends React.Component {
constructor(props){
super(props);
this.state = {
Iamstate1 : 1,
Iamstate2 : 'two'
};
}
}
handleClick(index){
this.setState({
Iamstate2 : index
});
}클래스를 쓸 경우 생성자 안에서 객체로 상태를 설정
상태를 갱신시 this.setState를 호출
리액트는 setState에 전달된 객체를 기존 상태와 병합
지정한 Iamstate2는 변경되고 Iamstate1값은 그대로 남는다.
함수 컴포넌트 방식
const [Iamstate1, setIamstate1] = useState({
Iamstate : 1,
Iamstate2 : 'iamstate'
});
setIamstate1(3);
자바스크립트 객체 형태에서 사태를 저장할 때 갱신 함수가 기존 객체를 새로운 객체로 대체하기 때문에 조심해서 써야한다!
const handleClick = (index) => {
setIamstate1({
...Iamstate1,
Iamstate2 : index
});
}스프레드 연산자로 ...state 이전 상태 새 상태로 복사한 이후 갱신할 데이터 작성
갱신 함수에 함수를 인자로 전달하여 setState
const handleClick = (index) => {
setIamstate1((state)=> {
return {
...state,
Iamstate2 : index
};
});
}상태 초기값을 생성하기 위해 작업을 수행하는 경우 지연 계산 초기 상태를 활용
const [selectedItem, setSelecteditem] = useState(()=> initialValue)3장 useReducer 훅을 사용해 컴포넌트 상태관리하기
reducer함수란?
=> 상태 갱신을 관리하는 함수
이벤트에 대한 반응으로 여러 가지 갱신 함수를 호출해야하는 경우 useReducer를 사용
리듀서는 상태값과 액션 값을 받는다.
인자로 받은 상태값, 액션 값 => 새 상태 값을 생성
function reducer(state,action){
if(action.type === 'inc'){
return state + 1}
}
if(action.type === 'dec'){
return state -1
}
}리듀서를 호출 할 때는 리듀서와 초기 상태를 전달 , useReducer는 현재 상태와 디스패치 함수를 포함하는 배열을 반환
const [state , dispatch] = useReducer(리듀서, 초기상태값);useReducer 훅이 최초로 생성될 때 초기 상태를 생성하고 싶다면 초기화 인자와 초기화 함수를 사용해 useReducer를 호출
const [state, dispatch] = useReducer(초기값, 초기상태값, 초기화 함수);
[useReducer관련 용어정리]
초기상태 : 최초로 실행될 때 컴포넌트 내의 변수와 프로퍼티값
액션 : 리듀서가 상태를 갱신하기 위해 사용할 정보
리듀서 : 현재 상태와 액션을 전달할 함수, 이듀서는 액션에 따라 현재 상태로부터 적절한 새 상태를 생성
상태 : 컴포넌트가 실행되는 어떠한 시점에 컴포넌트 내의 변수와 프로퍼티 값
디스패치 함수 : 액션을 리듀서에게 디스패치하기 위한 함수. 이를 통해 리듀서에게 어떤 액션을 수행할 지 전달
4장 부수 효과 활용하기
so