React에서는 디자인을 어떻게 적용할까?

aksen5240·2024년 1월 3일

목록 보기

7/14

📚 React에서는 디자인을 어떻게 적용할까?

프론트엔드 개발자들에게 디자인은 기능 개발 못지않게 중요하다. 특히 CSS 스타일링과 이미지 처리는 사용자 경험과 직접적으로 연결되어 있기 때문에, 이를 효과적으로 관리하는 것은 필수적이라 생각한다. 그렇다면 리액트에서는 어떻게 디자인을 적용할 수 있을까?

리액트에서는 Create React App을 사용해 이러한 기능들을 쉽게 사용할 수 있게 된다. 오늘은 이미지와 스타일을 적용하는 방법을 복습하고, 클래스네임을 보다 효율적으로 사용하는 방법에 대해 알아보고자 한다.

Create React App 문서: https://create-react-app.dev/docs/adding-a-stylesheet/

디자인 적용법

📌 이미지 불러오기

리액트에서 이미지를 불러오는 것은 간단한데, import 구문을 통해 이미지 파일을 불러온 뒤, 그 주소를 src 속성으로 사용하면 된다.

import profileImg from './assets/profile.jpg';

function Profile() {
  return <img src={profileImg} alt="프로필 사진" />;
}

export default Profile;

📌 인라인 스타일 적용하기

리액트에서 인라인 스타일은 문자열이 아닌 객체형으로 사용한다. 프로퍼티 이름은 CSS 속성 이름으로, 프로퍼티 값은 CSS 속성 값으로 사용하게 된다.

이때 프로퍼티 이름은 아래의 boarderRadius 처럼 대시 기호 없이 카멜 케이스로 써야 한다는 점도 꼭 기억하고 주의하자.

import profileImg from './assets/profile.jpg';

const style = {
  borderRadius: '10px',
  width: '200px',
  height: '200px',
};

function Profile() {
  return <img style={style} src={profileImg} alt="프로필 사진" />;
}

export default Profile;

📌 클래스네임을 통해 CSS 파일 불러오기

CSS 파일은 import 구문을 통해 불러올 수 있다. 이 때 from 키워드는 필요 없다.

CSS 파일에 정의된 클래스를 사용하려면 className prop에 문자열로 넣어주면 된다. 이 때, 재사용성을 위해 className prop을 부모 컴포넌트에서 받는 것이 좋다.

import profileImg from './assets/profile.jpg';
import './Profile.css';

function Profile({ className = '' }) {
  const classNames = `Profile ${className}`;
  return <img className={classNames} src={profileImg} alt="프로필 사진" />;
}

export default Profile;

📌 클래스네임 효율적으로 사용하기

클래스네임을 템플릿 문자열이나 배열로 처리하면 코드가 복잡해질 수 있는데, 이를 해결하기 위해 classnames 라이브러리를 사용할 수 있다. 이를 통해 클래스명을 효과적으로 결합하며, 개발 생산성을 크게 향상시킬 있다.

import classNames from 'classnames';

function Button({ isActive, color, size, children }) {
  return (
    <button
      className={classNames(
        'Button',
        isActive && 'active',
        color,
        size,
      )}>
      {children}
    </button>
  );
}
export default Button;