1주 차 두 번째 수업 TIL

원티드 프리온 보딩 프론트 앤드 1주 차 두 번째 수업  TIL (22.01.24~22.03.03)

프리온 보딩 프론트 앤드의 강사님은 위 코드의 공동 창업자&이사의 직책을 가지고 계신 김예리 님이 강의를 해주셨습니다.

 

Class/Functional Component

지금은 거의 다 Functional Component 방식을 사용하지만 아직 Class 방식의 리액트를 사용하는 회사도 있고 옛날 레거시 코드를 유지 보수해야 하는 경우도 있으므로 어떻게 사용하는지 알아두어야 한다고 했습니다

 

Class vs. Functional

• 왜 Functional인가?
• 왜 Class도 공부해야 하는가?
• 리액트 라이프사이클 순서와 역할?
• 라이프사이클 중 써본 메소드가 뭐가 있는지?
• 함수형 컴포넌트와 클래스형 컴포넌트의 차이는?

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React Lifecycle Methods diagram

 

React에서의 좋은 코드

개발을 함에 있어서 좋은 코드를 작성하는 이유는 단순히 회사의 매출을 증가시켜주기 위함이다. 

첫째로 사용자가 이용함에 있어서 불편한 점이 느껴져선 안되기 때문이고 , 두 번째로는 회사에 새로 들어오는 동료 개발자들을 위해 유지 보수하기 위해 노력을 줄이기 위해  코드를 이해함에 있어서 누구나 코드만 보면 이해할 수 있도록 적기 위함이다

 

많은 양의  js코드를 리팩토링 하는 것은 실제로 성능 개선에 큰 도움이 되지 않지만 ReactDom에서 Html 태그들을 생성하고 바꾸는 동작을 하는 것에 있어서 ReRender 되는 것은 컴퓨터나 브라우저의 성능에 부하를 주기 때문에 Props 관리에 주의를 해야 한다. 따라서 ReRender가 최대한 덜 되게 코드를 짜는 것이 중요하다!

 

JavaScript 에서의 클린코드

 

개발함에 있어서 동료 개발자들이 보고 이해하기 쉬운 코드를 짜기 위한 방법들에 대해서 배웠습니다.

 

변수(Variables)

의미 있고 발음하기 쉬운 변수 이름을 사용하세요

 

안 좋은 예:

const yyyymmdstr = moment().format('YYYY/MM/DD');

좋은 예:

const currentDate = moment().format('YYYY/MM/DD');

 

 

 

React로 사고하기

 

리액트의 컴포넌트를 작게 분리하는 방법과 state를 최소한으로 사용하는 방법에 대해 배웠습니다.

 

컴포넌트 분리

 

• 우리가 새로운 함수나 객체를 만들 때처럼 만드시면 됩니다. 한 가지 테크닉은 **단일 책임 원칙**입니다. 이는 하나의 컴포넌트는 한 가지 일을 하는 게 이상적이라는 원칙입니다. 하나의 컴포넌트가 커지게 된다면 이는 보다 작은 하위 컴포넌트로 분리되어야 합니다.

 

state는 정확히 설계하고 쓰자!

 

• 정적 버전을 만들기 위해 state를 사용하지 마세요. state는 오직 상호작용을 위해, 즉 시간이 지남에 따라 데이터가 바뀌는 것에 사용합니다.
• 애플리케이션을 올바르게 만들기 위해서는 애플리케이션에서 필요로 하는 변경 가능한 state의 최소 집합을 생각해보아야 합니다. 여기서 핵심은 중복배제 원칙입니다. 애플리케이션이 필요로 하는 가장 최소한의 state를 찾고 이를 통해 나머지 모든 것들이 필요에 따라 그때그때 계산되도록 만드세요. 예를 들어 TODO 리스트를 만든다고 하면, TODO 아이템을 저장하는 배열만 유지하고 TODO 아이템의 개수를 표현하는 state를 별도로 만들지 마세요. TODO 개수를 렌더링 해야 한다면 TODO 아이템 배열의 길이를 가져오면 됩니다.

 

 

컴포넌트 내 변수 위치

 

동료 개발자가 찾고자 하는 파일을 찾기 쉽게 파일의 위치를 생각하고 저장하는 것을 배웠습니다.

 

// 1. import 순서도 경로(or연관)에 따라 묶어주자
// ex) 멀리 있는 것 부터 차례대로

// 2. propType

// 3. 컴포넌트 정의

// 4. Styled Component

// 5. 간단한 상수 설정 (웬만하면 외부로)

// 6. 해당 컴포넌트에서만 사용할 함수 (2번 이상 사용하면 공통/컴포넌트 utils로)

 

조건부 렌더링은 패턴이 아니라 가독성을 높이기 위한 팁이다

 

if ,else를 대신해서 상항연산자를 사용할 때 조건요소길이가 너무 길어질 때가 있거나 null을 리턴값으로 넣는 경우가 있는데 가독성이 좋지 않으니 코드의 흐름을 이해하기 어려우니 && 연산자와 조건이 너무 많으면 if else 를 쓰는 것이 더 좋을 수도 있다고 배웠습니다.

 

{count ? <div>{count}<div> : null}

 

• and 연산자 (&&)
• 삼항 연산자 (a? b : c )

 

React 성능 향상을 위한 몇 가지 방법

 

React.PureComponent, React.memo

 

변하는 값은 없으나 계속해서 리 렌더 되는 경우에 페이지의 과부하를 막기 위해 사용하는 memo와 PureComponent에 대해 알려주셨습니다.

 

• 항상 PureComponent와 memo를 쓸 필요는 없습니다.
• 같은 props인데 rerender 될 경우가 많은 컴포넌트인가? 할 때 쓰시면 좋을 것 같습니다 😉

Avoid Object/Array Mutation

리액트에서 state를 사용할 때 state 값을 직접 변경하지 않고  새로운 객체를 만들어서 설정하는 법을 배웠습니다.

 

React가 state 객체의 변화를 빨리 구분하려면, 객체 자체를 접근해서 수정하지 말고, 새로운 객체를 만들어라.

 

• (O) ES6의 spread syntax
• (O) ES6의 Object.assign
• (O) ES8의 object spread properties

 

참조형 데이터를 주의

 

useMemo는 특정 결괏값을 재사용할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다.

 

함수 전달할 때는 useCallback 쓰기

// Child
function CounderButton({ handleClick }) {
  return (
    <button onClick={handleClick}>
      확인
    </button>
  );
}

export default React.memo(CounderButton);

// ==========================================
// Parent

function Modal() {
  return (
      <CounderButton 
				handleClick={() => { alert('clicked!!'); }} 
			/>
  );
}

function Modal() {
    const onHandleClick = useCallback(() => {
        alert('clicked!!');
    });

    return (
        <CounderButton
            handleClick={onHandleClick}
        />
    );
}

useEffect 다시 보기

useEffect는 의존성 배열(두 번째 매개변수)을 관리하는 것이 관건이다.

 

useEffect 훅 내에서 함수를 사용하는 경우

 

• 함수가 정말로 필요할 때만 호출되도록 해야 함

 

useEffect의 의존성 배열이 너무 길 때,

 

• 의존성 배열이 너무 길다면 → 점점 관리하기가 힘들어진다.
• 의존성 배열에 추가하지 않아도 되는 방법을 생각해본다.

 

참고자료

 

 

라이트하우스와 함께한 성능 개선 고군분투기

 

React 의 성능을 조금 이라도 올려보자 (Performance Optimize)