📌 지난 포스트
[React] Create-React-App (CRA)으로 리액트 프로젝트 시작하기 ①

---

🧩 리액트 컴포넌트 분리와 모듈 스타일링

🪄 이번 포스트에서는 그동안 배워왔던 컴포넌트 분리에 각각의 컴포넌트 스타일을 입히는 방법을 배워보기로 한다. 진짜 어메이징하고 클래스 명을 기억하거나 고민하지 않아도 되어서 최고였음

1️⃣ Button.js 컴포넌트 파일 만들기

🔹 src 폴더 안에 Button.js 파일을 새로 만들어 컴포넌트를 작성
🔹 export default는 다른 파일에서 해당 컴포넌트를 불러올 수 있게 해주는 역할을 한다.
예를 들어, 렌더링을 할 App.js파일에서 Button 컴포넌트를 정상적으로 가져올 수 있게 하기 위해 export와 import는 필수이다.
🔹 Button 함수의 props로 text={"continue"}를 써주면 이런 버튼이 생성된다.

<script>
// Button 컴포넌트
function Button({text}){
    return <button>{text}</button>
}
export default Button; // App.js에서 Button을 가져올 수 있게 하기 위해 내보내기


// App 컴포넌트
import Button from './Button';

function App() {
  return (
    <div>
      <h1>Welcome back!</h1>
      <Button text={"Continue"}/>  // text props로 버튼에 text 삽입
    </div>
  );
}

export default App;

</script>

2️⃣ 컴포넌트에 스타일 적용하는 법

✅ 방법 1 : 인라인 스타일 (비추천)

🔹 코드와 스타일을 한 번에 관리할 수 있어 간단하지만, style 속성이 길어지면 코드가 지저분해지고 재사용이 어렵다는 큰 단점이 있어 비추천한다.

<script>
function Button({text}){
    return <button
    			style={{
                backgroundColor:"skyblue",
                padding:"10px"
                }}
    		>{text}</button>
}
</script>

✅ 방법 2 : 전역 CSS 파일

🔹 index.js 또는 App.js 등에서 css파일을 import하여 적용할 수 있다. 하지만 이 방식은 모든 컴포넌트 스타일에 영향을 줄 수 있어 충돌의 위험이 있다.

<script>
	import './styles.css';
</script>

✅ 방법 3 : CSS 모듈 사용 (추천!)

🔹 예시로 Button.module.css라는 모듈 파일을 생성해서, 해당 컴포넌트 전용 스타일을 작성할 수 있다.
🔹 Button.module.css을 import로 불러오고, 컴포넌트에 className 속성을 설정한다. 🔹 styles.btn처럼 표기하는 이유는 Button.module.css를 import styles from "./Button.module.css"처럼 불러오면, CSS 클래스들이 자바스크립트 객체 형태로 변환되어 styles 안에 담긴다. {btn: "Button_btn__1a2b3"} 이런식으로. 그래서 컴포넌트에서 사용할 때는 <button className={styles.btn}>Click</button> 이렇게 적어 객체 안에 있는 속성을 꺼내 쓰는 것이다.
🔹 이 방법은 CSS 모듈의 고유한 클래스명이 자동으로 생성되기 때문에 클래스명이 충돌하지 않는다.

<style>
	/* Button.module.css */
    .btn{
    	background-color:skyblue;
        padding:10px;
    }
</style>

// Button.js 컴포넌트 파일
<script>
	import styles from './Button.module.css';
    
	function Button({text}){
    	return <button className={styles.btn}>{text}</button>
	}
	export default Button;
</script>