리액트 코드 작성 요령

jaehan·2023년 2월 9일

React

목록 보기

30/33

실전 리액트 프로그래밍을 읽으면서 리액트 코드 작성을 할떄 가독성과 생산성을 높여주는 방법을 정리해 보려 한다.

책에는 자바스크립트 기준으로 나와있는데 나는 타입스크립트를 사용하기 때문에 내가 사용하던 방법이랑 합쳤다

리액트 코드 작성 요령

컴포넌트 파일 작성

interface IMyComponentProps {
  name: string;
  id: number;
}

export const MyComponent = ({ name, id }: IMyComponentProps) => {
  return <div></div>;
};

const DEFAULT_NAME = "kim";

파일의 최상단에는 속성의 타입을 정의한다.
처음 코딩할때부터 습관이 인터페이스 작성할때 I를 컴포넌트 앞에 붙히고 뒤에 Props를 붙히게 되었다.
쓰다보니까 이게 가독성도 좋고 편해서 계속 이렇게 사용중이다
📌 자바스크립트를 사용하면 propTypes를 이용해서 사용할 수 있다.
컴포넌트 함수의 매개변수는 명명된 매개변수로 정의하는게 좋다.
이것도 처음부터 화살표 함수로 한번에 작성하는게 가독성이 좋은것 같아서 이렇게 작성하고 있다.
컴포넌트 바깥의 변수와 함수는 파일의 가장 밑에 정의한다
변수는 const로 정의하는게 좋고 상수는 대문자로 정의해주는게 좋다.

연관된 코드 모으기

export const MyComponent = ({ name, id }: IMyComponentProps) => {
  const [userName, setUserName] = useState(name);
  const [userId, setUserId] = useState(id);
  useEffect(() => {
    setUserName("kim");
  });
  useEffect(() => {
    setUserId(25);
  });
  return <div></div>;
};

나는 위코드처럼 상태값을 상단에서 정의하고 useEffect를 그 다음에 모아서 정의했다 근데 이게 더 많아지고 길어지면 항상 보기가 불편했는데 이책에서는 기능별로 모으는게 좋다고 해서 앞으로는 아래 코드 처럼 작성 할 생각이다

export const MyComponent = ({ name, id }: IMyComponentProps) => {
  const [userName, setUserName] = useState(name);
  useEffect(() => {
    setUserName("kim");
  });
  
  const [userId, setUserId] = useState(id);
  useEffect(() => {
    setUserId(25);
  });
  return <div></div>;
};

커스텀 훅으로 분리하기

export const MyComponent = ({ name, id }: IMyComponentProps) => {
  const userName = useUserName(name);
  const userId = useUserId(id);
  return <div></div>;
};

hooks/use-username.tsx
hooks/use-userid.tsx

export const useUserName = (name: string) => {
  const [userName, setUserName] = useState(name);
  useEffect(() => {
    setUserName("kim");
  });
  return userName;
};


export const useUserId = (id: number) => {
  const [userId, setUserId] = useState(id);
  useEffect(() => {
    setUserId(25);
  });
  return userId;
};

이렇게 커스텀 훅으로 빼면 컴포넌트의 코드가 훨씬 짧아진다.
📌 그렇다고 이렇게 복잡하지 않은 코드를 커스텀 훅으로 빼면 오히려 가독성이 떨어지니 필요할때만 사용하자!

조건부 렌더링

우선 나는 지금까지 리액트 코드를 짜면서 if문은 사용해 본적 없다.
왜냐하면 삼항 연산자와 &&가 가독성이 훨씬 좋기 떄문이다.
이 책에서도 삼항 연산자와 &&를 추천하고 있다.

삼항 연산자

아래 코드처럼 사용하는게 삼항연산자이다
isLogin이 참이면 왼쪽 거짓이면 오른쪽을 실행시키는 것이다.

{isLogin ? {"login"} : null}

&&

위 코드와 같은 결과를 나타내는데 위 처럼 삼항연산자의 결과가 null이 있을경우 사용하면 좋다
앞의 경우가 참이면 뒤의 경우가 출력되고
앞의 경우가 거짓이면 그 이후로는 출력되지 않는다.

{isLogin && {"login"}}

프레젠테이션, 컨테이너 컴포넌트

내가 사용해왔던 방식인데 정확히 어떤 방식인지 몰랐는데 책을 통해 알게 되었다.
이 방식은 비지니스 로직과 상태값의 유무로 컴포넌트를 분리하는 방식이다.
컨테이너 컴포넌트에서 비즈니스 로직과 상태값을 관리해서 내부의 프레젠테이션 컴포넌트에 props로 내려주고 프레젠테이션 컴포넌트 에서는 받은 값들로 view만 보여주는 것이다.

프레젠테이션 컴포넌트 정의

비즈니스 로직이 없다.
상태값이 없다. 단, 마우스 오버와 같은 UI 효과를 위한 상태값은 제외한다.

내 사용법

어차피 react는 spa이기 때문에 페이지 컴포넌트 내에서 모든 컴포넌트를 불러온다.
그래서 나는 페이지 컴포넌트를 컨테이너 컴포넌트로 정의해서 여기 안에서 비지니스 로직을 다 처리하고 props들을 뿌려줬다.
이렇게 되면 코드 길이가 또 너무 길어지는 단점이 있었는데
커스텀 훅으로 빼거나 valtio같은 상태관리 함수를 써서 코드를 간결하게 정리 했었다
valtio 정리

❗️지금까지 최대한 코드를 간결하고 보기좋게 짜려고 노력했었는데 이 책의 내용과 내 방식이 얼추 비슷해서 하던대로 하면 될것 같다!

참고 :실전 리액트 프로그래밍