react.js clean code 작성법(불필요한 useState 제거하기.)

1. 업데이트가 되지 않는 일반적인 객체라면 리엑트 외부로 내보내기

2. useState 대신 플래그로 상태를 정의할 수 있다.

function FlagState() : Element
	const isLogin = 
        has Token &&
		hasCookie &&
        isValidCookie &&
        isNewUser ＝ false &&
		isValidToken;
	return <div>{isLogin && "안녕하세요! 반갑습니다."}</div>

플래그란?
https://deseul.tistory.com/14

3. props를 useState에 넣지 말고 바로 return문에 사용하기.

props의 값이 변하게 되는 경우 useState를 쓰지 말고 아래와 같이 const로 상태를 선언

const UserState = ({ userList }) => {
    const filteredUserList = userList.filter((user) => user.completed === true);
};

∵ 컴포넌트 내부 변수는 렌더링마다 고유한 값을 가지기 때문에.

4. useRef를 사용해 컴포넌트의 생명주기와 동일한 리렌더링되지 않는 상태를 만들 수 있다.

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

function RefInsteadOfState() {
	const isMounted = useRef(false);
    
  useEffect(() => {
    isMounted.current = true;

    return () => (isMounted.current = false);
  }, []);

  return <div>{isMounted && "컴포넌트 마운트 완료!"}</div>
}

5. 연관된 상태는 하나로 묶어서 관리하자.

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

function FlatState() {
  // 하나의 state로 관리
  const [promiseState, setPromiseState] = useState(PROMISE_STATE.INTI);

  const fetchData = () => {
    setPromiseState(PROMISE_STATE.LOADING);
    fetch(url)
    .then(() => {
      setPromiseState(PROMISE_STATE.FINISH)
    })
    .catch(() => {
      setPromiseState(PROMISE_STATE.ERROR)
    })
  }

  if (PROMISE_STATE.LOADING === promiseState) return <LoadingPanle/>
  if (PROMISE_STATE.FINISH === promiseState) return <FinishPanle/>
  if (PROMISE_STATE.ERROR === promiseState) return <ErrorPanle/>
}

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

function ObjectState() {
  // 하나의 state로 관리
  const [promiseState, setPromiseState] = useState({
    isLoaidng: false,
    isFinish: false,
    isError: false
  });
}