[React.js]리액트 타입선언, 조건부 렌더링, 컴포넌트 재사용성

 

💻 추천하는 컴포넌트 파일 작성법

 

컴포넌트 파일의 상단에 속성값 타입을 상단에 작성 해주는 것이 좋습니다.

MyComponent.propTypes = {
  //...
}

 

 

💡 컴포넌트에 이름을 붙여주는 것이 디버깅할때 확인이 편함.

export default function ({ prop1, prop2 }) {}

👇

export default function MyComponent({ prop1, prop2 }) {}

 

💡 외부 객체나 변수 같은경우는 가장 밑에 따로 작성

MyComponent.propTypes = {
  //...
}

export default function MyComponent({ prop1, prop2 }) {}

const DATA = [];
function setData(data) {
  DATA = data;
}

 

💡서로 연관된 정보를 묶어두는것이 좋음.

// v1에 관련된 코드
const [v1, setV1] = useState(0);
useEffect(() => console.log(v1))

// v2에 관련된 코드
const [v2, setV2] = useState(0);
useEffect(() => console.log(v2))

 

💡코드가 복잡해지면 커스텀 훅으로 분리.

 

💻 속성값 타입 정의하기 : porp-types

 

prop-types를 이용하여 동적타입에서도 속성값의 타입을 정함

 

👉 타입정의 자체가 훌륭한 문서가 됨

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  optionalArray: PropTypes.array.isRequired,
  optionalBool: PropTypes.bool.isRequired,
  optionalFunc: PropTypes.func.isRequired,
  optionalNumber: PropTypes.number.isRequired,
  optionalString: PropTypes.string.isRequired,
  optionalEnum: PropTypes.oneOf(['News', 'Photos']).isRequired,
};

💡 PropTypes.element

리액트 요소

 

💡 ProtoTypes.node

컴포넌트 함수

 

💡 ProtoTypes.instanceOf

특정 클래스의 객체 

 

💡 ProtoTypes.oneOf

지정된 값 중 하나

prop1: PropTypes.oneOf(['jone', 'mike']),

 

💡 ProtoTypes.arrayOf

배열에 들어갈 요소의 타입

 

prop1: PropTypes.arrayOf(PropTypes.number)

 

💡 ProtoTypes.shape

객체의 속성값 타입

 prop1: PropTypes.shape({
    name: PropTypes.string,
    description: PropTypes.string
  })

 

💻 가독성을 높이는 조건부 렌더링 방법

if문 vs 삼항연산자(+ &&)

 

💡 삼항연산자

isLogined ? <div></div> : null

간단한 조건의 경우는 삼항연산자,

+ 여러 조건이 달릴경우는 if문이 더 좋음.

 

삼항연산자를 연달아 사용하는 것보다 👉 분리하여 &&으로 사용하는것을 추천

 

💻 재사용성을 고려한 컴포넌트 구분법

 

💡 관심사의 분리

비슷한 기능을 묶어서 관리

 

❗ 자식 컴포넌트에서 부모의 상탯값을 별도로 관리하는 것은 좋지 않음

 

재사용성이 좋은 컴포넌트

• 상태값이 없고,
• 비지니스 로직이 없는 컴포넌트