4장 리액트 코딩은 결국 컴포넌트 작성이다

4.1 가독성과 생산성을 고려한 컴포넌트 코드 작성법

 

동적타입 언어인 자바스크립트의 단점을 극복하기 위해 컴포넌트 속성값에 타입정보를 추가하는 방법은 

일반적으로 렌더 함수에서 많으 코드를 작성하기 때문에 렌더함수의 코드는 쉽게 복잡해진다

과연 가독성 높은방식이 뭐가 있을까

 

4.1.1 컴포넌트 작성법

 

 - 코드를 그룹으로 나누고 우선순위에 따라 배치하기

 리액트 프로젝트에서 대부분의 작업은 컴포넌트 파일안에서 이루어진다

컴포넌트 파일안에서 작성하는 코드는 몇가지그룹으로 나눌수 있다

일반적으로 비슷한 종류의 코드를 한곳으로 모으면 코드 가독성이 향상된다

 

우선순위가 중요!

-1.속성값 타입정의코드

2.상탯값 초기화코드

3.render 메서드를 제외한 나머지 생명주기 메서드

4. 생명주기 메서드를 제외한 나머지 메서드

5.render 메서드

6. 컴포넌트 외부에서 정의하는 변수와 함수

 

함수형 컴포넌트 작성

 

함수형 컴포넌트에도 클래스형 컴포넌트에 적용했던 규칙을 대부분 적용할 수있다

보통 함수형 컴포넌트는 기능이 단순하기 때문에 클래스형 컴포넌트보다 가독성이 좋다

따라서 클래스형 컴포넌트가 꼭 필요한 경우가 아니라면 함수형 컴포넌트로 작성 하는게 좋다

 

MyComponent.propTypes = {

// 파일의 상단에서 속성값 타입을 정의한다

}

 

function MyComponent({props1, props2}) {

//함수형 컴포넌트의 매개변수는 명령된 매개수변수로 정의하는게 좋다

}

 

const URL_PRODUCT_LIST = '/api/products';

function getTotalPrice({price , total}) {

// 컴포넌트에서 사용되는 변수와 함수를 컴포넌트 코드 밑에 작성한다

}

export default MyComponent;

//컴포넌트를 외부로 내보내는 코드는 파일의 가장 밑에 작성한다

//이렇게 하면 나중에 고쳐 컴포넌트를 적용하기 좋고,

컴포넌트에 이름을 부여하도록 강제할 수있다

이름 없는 컴포넌트를 내보내면 리액트개발자 도구에서 디버깅이 힘들다

참고로 같이 사용하면 이름 없는 컴포넌트가 됨

export default function() {}

export default () => {}