[React] 리액트 안티패턴 4가지

리액트 안티 패턴

 

1. 프로퍼티를 사용한 상태 초기화

부모에서 받은 프로퍼티를 이용해 상태를 초기화했을 때의 문제점은 두 가지가 있다.

1. 정보 출처가 중복: props에서 받은 값을 state에 저장한 경우 핸들러를 이용해 state의 값을 변경했는데 이때 props에서 받은 값과 state에 저장된 값이 서로 달라지게 된다.

이때 어떤 값을 신뢰해야 하는지 100% 확신하기 어렵다.

2. 컴포넌트로 전달한 props가 변경되어도 상태가 업데이트되지 않음: 애플리케이션의 수명 주기 동안 프로퍼티의 값이 변경되더라도 자식 컴포넌트는 이미 초기화된 후이기 때문에 state는 초기화 시 저장한 값이다.

 

 

2. 상태 변경

setState를 사용하지 않고 값을 변경하면 컴포넌트를 다시 렌더링 하지 않는다.

예를 들어 아래처럼 state를 변경하려는 방법은 뷰의 갱신을 일으키지 않는다.

handleClick = () =>{
    this.state.count++;
};

또 handleClick으로 렌더링 없이 값만 변경한 상태로 setState를 호출하면 그제야 변경된 값이 뷰에 반영되기 때문에 원하지 않는 동작을 일으킬 수 있다.

 

상태의 값을 변경하는 것은 배열에서도 주의해야 한다.

아래처럼 배열에 직접 push를 할 경우 배열은 메모리 주소를 저장하기 때문에 state가 변경되었다고 인식하지 않아 리렌더링 되지 않는다.

handleClick = () =>{
    this.state.items.push('temp');
}

setState를 이용해 새 배열을 리턴해주어야 한다.

 

 

3. 인덱스를 키로 사용

리액트가 DOM을 업데이트하기 위해 키 프로퍼티가 필요한데 이때 키의 사용 여부만큼 키에 어떤 값을 사용하는지도 중요하다.

예를 들어 리스트를 map함수로 출력하고 map의 index를 키로 사용하고 있을 때를 생각해보자.

리스트의 맨 위에 새 항목을 추가한 경우 리액트는 2번 인덱스에 새 항목을 추가했다고 판단한다.

이것은 키 프로퍼티를 사용하지 않았을 경우와 똑같은 작동 방식이다.

따라서 항목의 값이 중복되지 않는 경우 이것을 키로 사용하거나 고유 식별자를 만들어야 한다.

 

 

4. DOM요소에 프로퍼티 전개

일반적으로 프로퍼티를 자식 컴포넌트에 전달할 때 펼침 연산자로 프로퍼티를 하나씩 작성하지 않고 넘겨주는 사용 한다.

그런데 프로퍼티를 DOM요소에 전개하면 알 수 없는 HTML속성이 추가될 위험이 있다.

이때 사용할 수 있는 방법이 유효한 DOM 프로퍼티가 들어 있음을 명시하는 domProps라는 프로퍼티를 만들어 컴포넌트로 전개하는 것이다.

// Spread 컴포넌트
const Spread = props => <div {...props.domProps} />

// 사용
<Spread foo="bar domProps={{ className: 'baz' }} />