[React JS] #2 컴포넌트와 JSX

* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link)

 

🧐 컴포넌트란

리엑트로 만든 페이지는 컴포넌트들로 구성된다. 페이지들 단위로 작성되는 것이 아니라, 각 부분을 컴포넌트로 만들어서 조립해서 사용한다. 비슷한 부분은 코드를 재사용할 수 있고 유지보수가 쉬워진다는 장점이 있다. 아래의 예시를 보자.

간단하게 컴포넌트로 나눠봤을 때 예시는 이렇다.

더 자세히 쪼개자면 뉴스 컴포넌트 안에 단일 뉴스 컴포넌트, 탭 컴포넌트 ... 등으로 또 나눌 수 있다. 이런 컴포넌트는 다른 페이지에서도 재사용이 가능하다.

 

 

💻 코드로 돌아가기

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          yerang park.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

다시 코드로 돌아서 보면, App.js에는 App 컴포넌트가 있다. 이것을 export시켜서 index.js에서 index.html 에 매핑시키고 있다.

이처럼 함수로 만들어진 컴포넌트를 함수형 컴포넌트라고 한다.

추가로, 컴포넌트명은 대문자로 시작하도록 작성하며, 지금 이 함수가 리턴하는 것은 JSX(Javascript XML)다. 이 부분을 직접 작성해보자!

 

👩🏻‍💻 JSX 직접 작성해 보기

import './App.css';
 
function App() {
    const name = "Yerang Park"
    const naver = {
        name : "네이버",
        url: "https://naver.com",
    };
    return <div className="App">
        <h1 style={{color: "green", backgroundColor: "yellow"}}>
            Hello, {name}!
        </h1>
        <a href={naver.url}>{naver.name}</a>
    </div>;
}
 
export default App;

단, 중괄호 내부에 변수명, 계산식을 적으면 그 값이 올바르게 표시되나, boolean 타입이나 객체는 표현하지 못한다.