리액트 디자인 적용

프론트엔드 개발자에게는 개발 기능 못지 않게 디자인은 중요하다. 특히 CSS 스타일링과 이미지 처리가 중요하다. 이는 UX와 직접적으로 연결되어 있기 때문에 잘 관리하는 것은 필수적이라 말할 수 있다. 

 

방법 1. 이미지 불러오기

import 구문을 통해 이미지 파일을 불어온 뒤, 주소를 src 속성으로 사용

import profileImg from '해당 경로';

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

export default Profile;

 

방법 2. 클래스네임을 통해 CSS 파일 불러오기

import 구문을 통해 CSS 파일을 불러올 수 있다.

 

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

import profileImg from '해당 경로';
import './Profile.css';

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

export default Profile;

 

방법 3. 클래스네임 효율적으로 사용하기

방법 2를 사용하다보면, 코드가 지저분해져 보이는데, 이를 classnames 라이브러리를 통해 해결할 수 있다.
설치 링크 --> npm classname 패키지: https://www.npmjs.com/package/classnames

import classNames from 'classnames';

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

export default Button;

 

인라인 스타일

- 카멜케이스 

- 

---

참고 링크

https://velog.io/@aksen5240/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C%EB%8A%94-%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%84-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%A0%81%EC%9A%A9%ED%95%A0%EA%B9%8C