스타일링과 CSS

CSS 클래스를 컴포넌트에 어떻게 추가하나요?

className prop에 문자열을 넘깁니다.

render() {
  return <span className="menu navigation-menu">Menu</span>
}

컴포넌트의 props나 state에 CSS 클래스가 의존하는 것은 자주 사용되는 방식입니다.

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

팁

이러한 방식으로 코드를 자주 작성한다면, classnames 패키지를 통해 이 작업을 간소화할 수 있습니다.

인라인 스타일을 사용할 수 있나요?

네, 여기에서 스타일링에 관한 문서를 참고해 주세요.

인라인 스타일은 좋지 않은 방식인가요?

보통의 경우 CSS 클래스가 인라인 스타일보다 더 나은 성능을 보입니다.

CSS-in-JS가 무엇인가요?

“CSS-in-JS”는 외부의 파일에 CSS를 정의하는 대신에 JavaScript와 결합하는 패턴을 의미합니다.

이러한 기능은 React에 포함된 기능이 아닌, 별도의 라이브러리로 제공되고 있는 것에 주의해주세요. React는 어떻게 스타일이 정의되는지에 대한 의견이 없습니다. 의구심이 생긴다면, 평소처럼 별도의 *.css 파일에 정의한 뒤 className을 통해 참조하는 것으로 시작해볼 수 있습니다.

React에서 애니메이션을 할 수 있나요?

React는 애니메이션을 표현할 수 있습니다. 이에 대한 예시로 React Transition Group, React Motion, React Spring 또는 Framer Motion을 확인해 보세요.