(React) Tips for React

React 관련 팁

리액트를 사용할때 유용한 팁들을 정리해 본다.

1. 함수형 컴포넌트를 사용하자. (functional component)

클래스 기반의 컴포넌트 대신 함수형 컴포넌트를 사용하자.

이는 코드의 양을 줄여 이해하기 쉽게 해주고,

상태를 저장하지 않아 상태에 의한 부작용을 걱정할 필요가 없어지며,

컴포넌트 내의 일부분을 따로 뽑아내기에 용이하게 해준다.

2. 컴포넌트를 작게 쪼개자.

컴포넌트를 잘게 분할하여 재사용, 유지, 보수를 쉽게하자.

가령 댓글을 표시하는 컴포넌트를 작성할때 모든 내용을 한 컴포넌트에 담는 대신,

유저 정보, 아바타 등을 표시하는 컴포넌트를 따로 생성한 뒤,

그것들을 각각 가져와 사용하는 방식이다.

3. setState는 객체대신 함수에 사용하자.

리액트는 상태가 제대로 변경되었는지 보장하지 않는다.

그렇기에 setState를 이용해 상태를 변경해도 this.state 는 내가 원하는 값이 아닐 수도 있다.

this.setState({data: !this.state.data})

위 코드를 아래와 같이 작성한다.

this.setState((prevState, props) => {
    return {data: !prevState.showForm}
}

함수를 setState에 사용하여 안정적인 코드를 작성하자.

4. prop-types 라이브러리를 이용하자.

propTypes 는 속성의 타입을 체크해준다.

올바른 데이터 타입을 사용하는지 확인해 버그를 줄일 수 있다.

아래 코드는 Movie 컴포넌트의 title 속성이 string타입이 맞는지 확인한다.

Movie.propTypes = {
    title: PropTypes.string.isRequired
}