[코드 걸음마] 비교 연산자, 하나의 state로 관리할것

1. 논리 연산자를 잘 사용하여 코드량을 줄이자

/*
BEFORE
두개의 함수를 사용하다보니 코드양이 길어진다
*/
const handleClickOpen = () => {
    setOpen(true);
  };

const handleClose = () => {
    setOpen(false);
};

/*
AFTER
논리 연산자를 사용하여 하나의 함수로 처리하였고 코드양도 줄어들었다
*/
const toggle = () => {
    setOpen(!open);
};

!과 같은 논리연산자와 삼항연사자를 통해 if문을 대체하거나 여러개로 쪼개져있는 함수들을 하나로 처리할수 있는 경우가 많다. 

 

2. 하나의 state로 관리할 것

개별적으로 컴포넌트들을 렌더링한다고 컴포넌트마다 state를 지정해주면 코드가 한없이 복잡해 질 것이다.

하나의 역할로 묶을 수 있다면 하나의 state로 관리해보자

/*
BEFORE
각각의 state를 선언하여 관리하면 코드양이 많이지고 관리포인트가 많아져 복잡히다.
*/

const [name, setName] = useState<string>();
const [age, setAge] = useState<number>();
const [height, setHeight] = useState<string>();

/*
AFTER
타입을 선언해주고 하나의 state로 관리해주면 코드도 간결해지고 가독성도 올라가 좋다
*/

interface User{
 name: string
 age : number
 height: string
}

const [profile, setProfile] = useState<User>();