효율적인 컴포넌트 파일 작성
//가장 상단에 속성값의 타입 정의
MyComponenet.propTypes = {
//...객체입력
}
//컴포넌트 학수 작성 시 함수에 이름을 부여해주어야함
//컴포넌트 매개변수는 명명된 매개변수 문법으로 작성
export default function MyComponent({ prop1, prop2 }) {
//...
}
const COLUMNES = [
{ id: 1, name: 'phoneNumber', width: 2100, color: "white" },
{ id: 1, name: 'city', width: 100, color: "grey" },
//...
];
const URL_PRODUCT_LIST = '/api/products';
function getTotalPrice({ price, total }) {
//...
}🔹 가장 상단에 속성값 타입 정의 : 컴포넌트 사용 시 속성값을 입력해야함. 편리할 수 있도록 가장 상단에 적어주는 것이 좋음
🔹 함수 이름 정의 : 이름 정의 하지 않으면 리액트 개발자 도구에서 디버깅이 힘듬
🔹 명명된 매개변수 문법으로 작성 : 불필요한 코드 발생
🔹 컴포넌트 밖의 변수와 함수는 파일 가장 밑에 정의
🔹 외부 변수 명은 대문자로 작성 : 변하지 않는 값이라는 걸 시각적으로 보여줌
🔹 매우 큰 객체 생성은 컴포넌트 밖에서 처리하는 것이 좋음
📍 컴포넌트 내부에서 서로 연관된 코드는 한 곳으로 모아 관리하는 것이 좋음
⇒ useState 따로 모으고 useEffect모으고 보다는 관련된 훅끼리 묶어 작성
⇒ 커스텀 훅으로 분리할 때도 편함
속성값 타입 정의: prop-types
User.propTypes = {
male : PropTypes.bool.isRequired,
age: PropTypes.number,
type: PropTypes.oneOf(['gold', 'silver', 'bronze']),
onChangeName: PropTypes.func,
onChangeTitle: PropTypes.func.isRequired,
};🔹 isRequired : 필수값
🔹 oneOf : 입력해 준 값 중에 하나만 받을 수 있음
🔺 함수의 매개변수, 반환값에 대한 타입 정보 정의할 수 없음
- 주석으로 자세한 타입 적어주기!
MyComponent.propTypes = {
menu: PropTypes.element,
description: PropTypes.node,
message: PropTypes.instanceOf(Message),
name: PropTypes.oneOf(['jone', 'mike']).
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
ages: PropTypes.arrayOf(PropTypes.number),
info: PropTypes.shape({
color: PropTypes.string,
weight: PropTypes.number,
}),
infos: PropTypes.objectOf(PropTypes.number),
}🔹 element : 리액트 요소
🔹 node : 리액트 요소 뿐 아니라 리액트 컴포넌트가 반환할 수 있는 모든 값
🔹 instanceOf() : 특정 클래스의 객체인지 검사
🔹 oneOfType() : 타입을 배열로 입력 → 입력해 준 값 모두 참
🔹 arrayOf() : 매개변수로 넘겨준 타입으로 이루어진 배열
🔹 shape() : 객체 타입
🔹 objectOf() : 각 속성의 value 타입이 매개변수로 넘겨준 타입이다.
가독성 높이는 조건부 렌더링
//if문 사용
function Greeting({ isLogin, name }) {
if (isLogin) {
return <p>{`${anme}님 안녕하세요.`}</p>
}
}
//삼항 연산자 사용
function GreetingB({ isLogin, name }) {
return <p>{isLogin ? `${name}님 안녕하세요.` : `권한이 없습니다.`}</p>
}📍 삼항 연산자를 사용하는게 대부분 좋음
🔹 jsx부분에서 삼항 연산자를 사용하여 특정 부분을 가리고 싶을 때 : && 기호를 쓰면 끝에 null을 붙이지 않아도 됨
재사용성을 고려한 컴포넌트 구분법
관심사의 분리 : 복잡한 코드를 비슷한 기능을 하는 코드끼리 모아 별도로 관리
- UI처리 코드 && api호출 코드 && DB 관리 코드 ⇒ 같은 파일에서 관리 x
💡 코드가 복잡해지고 있다! → 관심사의 분리 필요함
🔹 연관된 컴포넌트끼리 폴더를 만들어 관리해야함
🔹 상태값의 중복 : 자식 컴포넌트에서 부모의 데이터를 별도의 상태값으로 관리하는 것은 좋지 않음
- 상태값은 일부 컴포넌트로 한정하여 관리하는 것이 좋음
🔹 컴포넌트가 비지니스 로직 && 상태값을 가지고 있으면 재사용성 떨어짐
- 비지니스 로직과 상태값의 유무로 컴포넌트 분리하는 것이 좋음
📌 재사용성이 좋은 컴포넌트 : 비지니스 로직이 없다, 상탯값이 없다.(마우스 오버와 값은 UI 효과를 위한 상태값 제외)
✔️ component 폴더 : 재사용성이 높은 컴포넌트 파일
✔️ container 폴더 : 재사용성이 낮은 컴포넌트 파일
