리액트 팁 및 클린코드 - 4. 기타

기타

커스텀 훅 반환값

결론 : 커스텀 훅의 반환값은 배열, 객체 등 원하는 것으로 선택하자.

 

흔히 처음에 가장 먼저 접하게 되는 훅인 useState 에 의해서 훅의 반환 값은 [값, setter] 로 해야한다는 생각을 가지게 된다. 하지만 훅의 반환값은 해당 훅의 기능에 맞춰서 원하는 형태로 반환해주면 된다.

 

export const usePosition() {
	const [x, setX] = useState(0);
	const [y, setY] = useState(0);
	
	return {
		x,
		y,
		setX,
		setY,
	}
}

 

 

인라인 스타일 X

인라인 스타일은 자제하라. 동적으로 스타일을 주고 싶다면 클래스네임을 활용하라.

 

 

삼항연산자로 클래스 네임 설정

조건에 따라 클래스네임을 추가할지 제거할지를 정할 때 클래스네임을 주고 싶지 않다면 undefined를 사용하라.

<input
  className={passwordNotValid ? 'invalid' : undefined}
/>

 

 

이모션(라이브러리) 사용 시 주의

결론 : 문자열이 아닌 객체를 전달하라

 

이모션을 사용할 때 아래와 같이 사용한다. 아래와 같이 사용하는 경우, IDE의 자동완성 기능의 도움을 받기 힘들고, 타입 세이프 하지 않은 코드이다.

css`
	background: '#111'
`

타입 세이프하지 않은 코드
값 또는 상태는 저장하려는 타입이 존재한다. 예를 들어 display속성은 ‘none’, ‘block’ 등의 정해진 문자열만 받는다. 하지만 이모션에서 css를 작성하는 경우 옳지 않은 값을 작성하더라도 코드가 실행되기 전까지는 알 수 없다.

 

이모션에서는 자바스크립트 객체를 전달할 수 있다. 아래와 같이 객체를 전달해야 IDE의 도움을 받을 수 있고 속성에 타입세이프한 값을 전달할 수 있다.

css({
	background: '#111'
});

 

 

브라우저의 새로고침은 자제하자

결론 : 브라우저의 새로고침은 모든 정보를 다시 로드해야하기 때문에 성능상 좋지 않다.

 

특정 기능을 활성화하였을 경우 정보를 로드하거나, 데이터를 리셋하는 등의 여러가지 기능을 수행해야하는 경우가 발생한다. 이때 브라우저 새로고침을 하면 이러한 작업을 한번에 처리할 수 있어 간편하게 하기 위해 새로고침을 하는 경우가 있다.

 

하지만 새로고침을 하게 되면 앱을 구동하기 위한 모든 정보를 다시 로드해야하기 때문에 성능상 좋지 못하다.

SPA 특성상 처음 로드 시간 이 제일 오래 걸리기 때문에 유저의 경험에도 좋지 못하다.

 

 

컴포넌트 리렌더링 최적화

리렌더링을 최소화하기 위해서는 컴포넌트 구조를 잘 작성해야 한다. 리렌더링은 상태의 값이 변경 될 때 발생한다.

 

즉, 특정 상태와 관련 된 컨텐츠는 같은 컴포넌트에 존재해도 상관이 없다. 하지만 특정 상태와 상관이 없는 컨텐츠를 컴포넌트를 분리하는 것이 좋다. 그래야 리렌더링 될 때 포함되지 않기 때문이다.

💡 자식 컴포넌트로 분리가 되면 리렌더링의 대상이 되기 때문에 구조를 잘 잡자.

💡 상태를 추가하게 될 경우 해당 컴포넌트에서 추가되는 상태와 상관이 없는 내용이 존재하는 경우 컴포넌트 분리가 필요할 수 있다.