[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이 적용되었다.