Day32

Day 32

React 배우기 (8) : React.memo

렌더링 조건

• 함수 컴포넌트는 자신의 상태가 변경될 때
• 부모 컴포넌트로부터 받은 prop이 변경될 때
• 부모 컴포넌트의 상태가 변경될 때

React.memo

• 자식 컴포넌트가 변경되지 않았을 경우에는 다시 렌더링되는 것을 막을 수 있다.
• ex)

const Box = React.memo(() => {
    console.log("Render box");
    const style = {
        width: 100,
        height: 100,
        backgroundColor: "red",
    };
    return <div style={style}></div>;
});

React 배우기 (9) : useCallback

• 컴포넌트가 다시 렌더링된다 = 함수 호출 = 다시 연산 = 함수 다시 정의
• 다시 연산을 막기위해 react.memo를 쓴 것처럼 함수가 다시 정의되는 것을 막기 위해 useCallback을 사용할 수 있다.
• 함수가 다시 재정의되면 새로운 메모리에 할당된 함수가 onChange prop으로 넘어오게 되어 React.memo를 쓰더라도 다시 렌더링이 된다.
• ex) const foodChange = useCallback((e) => setFoodOn(e.target.checked), []);

React 배우기 (10) : Custom Hook

• 자주 사용될 수 있는 상태 로직을 별도 사용자 정의 훅으로 빼서 사용하면 중복코드를 제거할 수 있고 편리하게 재사용이 가능하다.
• useHover, useKeyPress, useToggle

Storybook

• UI 컴포넌트를 모아서 문서화하고 보여주는 오픈소스 툴이다.
• 개발자가 컴포넌트를 storybook에 등록시켜 놓으면 어떤 컴포넌트가 있는지 쉽게 확인할 수 있다.
• .storybook : storybook 관련 설정 파일들이 있는 곳
• .stories : 등록된 story들이 있는 곳
• Action event들에 대한 로그를 남길 수 있는 기능이 존재

사용사례 (2) : 로그인, 회원가입 Form

• storybook을 사용한 개발
• Login
  • 이름, 패스워드
  • validation
  • submit 처리
    • 로그인 폼 안에 상태를 만들어서 관리할 수 있지만 코드가 더러워지고 재사용이 불가능
    • 사용자 정의 hook을 만들어서 Form을 정의하는 방법이 좋다.
    • Formik이라는 library를 이용해서 관리할 수도 있다.

컴포넌트 연습하기 (1) : Text

• react를 잘 쓰기 위해서는 component를 잘 만들 줄 알아야 함.
• 유연하게 작동하도록 만듦.