Develope Me!
[React] Component와 JSX, CSS 작성하기 본문
리액트는 페이지 단위로 HTML을 작성하는 것이 아닌 각 부분을 컴포넌트 단위로 조립해서 사용한다.
컴포넌트를 쉽게 이해하기 위해서 네이버 화면을 띄워서 보자
네이버 페이지를 보게 되면 검색/광고/로그인 등의 컴포넌트로 나눌 수 있다. 여기서 광고 커포넌트 같은 경우에는 어디든 비슷하게 동작할 것이기 때문에 똑같은 컴포넌트를 필요한 페이지에 스타일만 다르게 추가해서 사용 할 수 있다. 이렇게 컴포넌트 단위로 조립해서 사용하게 되면 코드 재사용이 용이하며 유지보수 또한 쉬워지게 된다.
App.js
import "./App.css";
function App() {
const name = "리액트";
const reactInfo = {
name: "react",
url: "https://ko.legacy.reactjs.org/docs/react-api.html",
};
return (
<div className="App">
/*style 태그는 객체로 추가해주기*/
<h1
style={{
color: "red",
backgroundColor: "green",
}}
>
Hello, {name} 시작
</h1>
<a href={reactInfo.url}>{reactInfo.name} 공식문서 보기</a>
</div>
);
}
export default App;
App.js는 함수형 컴포넌트이며 현재 디폴트로 export되고 있다. 이걸 index.js에서 import해서 사용하고 있다. 모든 컴포넌트는 대문자로 시작되어야한다. App함수를 보면 HTML 태그 같은 걸 리턴해주고 있는데 이것을 JSX(JavaScript XML)라고 한다. JSX는 자바스크립트를 확장한 문법이며 UI가 어떻게 생겨야 하는 지를 설명하기 위해 React와 함께 사용할 것을 권장한다.
이제 한 번 첫 컴포넌트를 만들어보자.
src 폴더에 component 폴더를 생성해주고 Hello.js파일을 생성해줬다.
Hello.js
const Hello = function () {
return <p>Hello World!!</p>;
};
export default Hello;
App.js
import "./App.css";
import Hello from "./component/Hello";
function App() {
return (
<div className="App">
<Hello />
</div>
);
}
export default App;
App.js에서 Hello.js를 import 해주고 <Hello> 태그를 사용해서 return 해준다.
브라우저로 확인해보면 정상적으로 출력되었음을 확인할 수 있다.
다음으로는 CSS를 작성하는 방법을 알아보자
1. 인라인 스타일 사용하기
<h1
style={{
color: "#f00",
background: "purple",
borderRight: "2px solid #000",
}}
>
css 테스트
</h1>
별도의 css파일 없이 간단하게 HTML 태그에 바로 적어주는 방법이다. style에 대한 value는 객체 형태로 작성되며 css 속성 이름은 카멜케이스로 한다. 인라인 스타일을 사용할 경우 간단하긴 하지만 리렌더링 시 돔을 새로 그리게 되어 불필요한 리로딩이 발생할 수 있을 뿐더러 재사용성이 떨어질 수 있다.
2. 생성된 css 파일 활용하기
index.css와 App.css가 있는데 index.css는 전체 프로젝트에 영향을 미치는 스타일링이 되어 있고 App.css는 app 컴포넌트의 한정된 내용들이 들어가 있다.
3. css 파일 추가하기
Hello.module.css
.box {
width: 500px;
color: blue;
height: 50px;
background-color: brown;
}
Hello.js
import World from "./World";
import styles from "./Hello.module.css";
const Hello = function () {
return (
<div>
<h1>Hello</h1>
<div className={styles.box}>Hello module box</div>
<World />
</div>
);
};
export default Hello;
App.js
import "./App.css";
import Hello from "./component/Hello";
import Welcome from "./component/Welcome";
function App() {
return (
<div className="App">
<h1
style={{
color: "#f00",
background: "purple",
borderRight: "2px solid #000",
marginBottom: "10px",
opacity: 0.5,
}}
>
css 테스트
</h1>
<Hello />
<div className="box">Test</div>
<Welcome />
</div>
);
}
export default App;
App.js에 있는 box 클래스는 App.css에 작성해둔 box 클래스의 style이 적용되었으며 Hello.js에서는 Hello.module.css에 작성해둔 box 클래스의 style이 적용되었다.
'Front-end > React' 카테고리의 다른 글
[React] Props의 사용과 State와의 비교 (0) | 2024.03.13 |
---|---|
[React] React Hook과 State(useState) (0) | 2024.03.13 |
[React] React 프로젝트 생성하기 (0) | 2024.03.12 |