[유데미(udemy) - React CleanCode] State

상태 소개 

 

요구사항부터 생각해보자

- 컴포넌트 상태를 언제 만들지?

- 전역상태

- 서버상태

- 상태 변경

- 상태 최적화

- 렌더링 최적화

- 불변성 

올바른 초기값 설정 

- state에서 초기값을 올바르게 설정을 해서 많은 nullable 코드를 방지하기 
- 초기값? 가장 먼저 렌더링이 될 때 순간적으로 보일 수 있는 값이기도 하다. 
- 상태를 CRUD -> 상태를 지울 때도 초기값을 잘 기억해놔야 원상태로 돌아간다. 

업데이트 되지 않는 값 

- 컴포넌트 내부에 두면 좋지 않음
   - 컴포넌트를 렌더링 할 때 마다 또 다시 참조해서 트리거하고 계산해야 될 시기와 기억해야할 시기에 대한 로직이 들어가있지 않음 

 

-> 리액트에서 관리되지 않는 값들에 대해서 컴포넌트 외부에 드러내도 된다. 

 

function NotUpdateValue() : Element {
// 상수를 다루거나 아니면 일방적인 방치 
// 업데이트가 되지 않는 일반적인 객체 
// 리액트 상태로 바꾼다던가 아예 외부로 내보내야 함. 
const INFO = {
	name : 'My Component', 
    value : 'Clean Code React',
    };

return (
	<div>
    	<main>{INFO}</main>
    	<ShowCount info={INFO}
    </div>
    )
 }

 

 

플래그 상태 

- 플래그 값 : 프로그래밍에서 주로 특정 조건 혹은 제어를 위한 조건을 불리언으로 나타내는 값 

- useState 쓰지 않고 컴포넌트 내부 변수로 활용할 수 있다. 

function FlagState() : Element {
	const isLogin =
    	hasToken && 
        hasCookie &&
        isValidToken;
        
        
       return <div>{isLogin && 안녕하세요}</div>
}

 

불필요한 상태

- props를 useState에 넣지 않고 바로 return 문에 사용하기 

- 컴포넌트 내부 변수는 렌더링마다 고유한 값을 가짐 

- 따라서 useState가 아닌 const로 상태를 선언하는 게 좋은 경우도 있음 

 

useState 대신 useRef 

- 리렌더링 방지가 필요하다면 useState 대신 useRef 

- 컴포넌트의 전체적인 수명과 동일하게 지속된 정보를 일관적으로 제공해야 하는 경우 

 

연관된 상태 단순화 하기

ex) 

 

const [isLoading, setIsLoading] = useState(false);
const [isFinishm setIsFinish] = useState(false);
const [isError, setIsError] = useState(false);

 

위 코드를 아래와 같이 변경하기

-> 연관된 상태 자동으로 동기화된다. ( a 라는 상태가 바뀌면 b라는 상태가 바뀐다 라는 것을 관리할 필요가 없어짐.) 

-> 에러를 방지하고 코드가 간결해짐 

const PROMISE_STATE = {
 INIT : 'init',
 LOADING : 'loading', 
 FINISH : 'finish', 
 ERROR : 'error', 
 }

const [promiseState, setPromiseState] = useState(PROMISE_STATE.init);

 

 

 

연관된 상태 객체로 묶어내기 

const [fetchState, setFetchState] = useState({
isLoading : false, 
isFinish : false,
isError
})

 

 

 

useState에서 useRedcuer로 리팩터링

구조화 된 상태를 원한다면 useReducer()

 

const INIT_STATE = {
isLoading : false,
isSuccess : false, 
isFail : false, 
 }

const reducer = (state, action) => {
	switch (action.type){
    	case 'FETCH_LOADING': 
        	return {isLoading: true, isSucess: false, isFail: false};
        case 'FETCH_SUCCESS': 
        	return {isLoading: false, isSuccess: true, isFail: false};
        case 'FETCH_FAIL': 
        	return {isFail : true, isSucess: false, isFail: false};
        default:
		return INIT_STATE;
   }
}

const [state, dispatch] = useReducer(reducer, INIT_STATE);

 

 

 

 

상태 로직 Custom Hooks로 뽑아내기

 

화면에 관련된 JSX 부분을 제외하고, 로직에 관련된 부분만 hooks로 분리

 

이전 상태 활용하기

setAge((prevAge => prevAge + 1);