[React] React Component 와 JSX문법

컴포넌트와 JSX문법의 기초에 대해서 알아보자.

리액트 컴포넌트

• html 태그를 반환하는 함수를 Component라고 한다. (함수 컴포넌트)
• 컴포넌트의 첫 글자는 대문자로 해야 한다.

function Header() {
	return (
	  <header>
      <h1>header</h1>
    </header>
	)
}

const Header = () => {
  return (
    <header>
      <h1>header</h1>
    </header>
  )
}

// 함수 선언식도, 화살표 함수도 둘다 가능하다.

 

부모 컴포넌트와 자식 컴포넌트

import './App.css'

const Header = () => {
  return (
    <header>
      <h1>header</h1>
    </header>
  )
}

function App() {

  return (
    <>
      <Header />
      <h1>반가워 리액트!</h1>
    </>
  )
}

export default App

• Header는 자식 컴포넌트, App은 부모 컴포넌트가 된다.
• App 컴포넌트는 조상 컴포넌트, 루트 컴포넌트라고 부른다. (main.jsx에서 렌더링하는 컴포넌트)
• 보통 컴포넌트는 따로 파일을 생성한다. 따라서 src/components 폴더를 생성하고, Header.jsx파일을 생성한다.

Header.jsx

const Header = () => {
    return (
      <header>
        <h1>header</h1>
      </header>
    )
  }

export default Header;

 

App.jsx

import './App.css'
import Header from './components/Header';

function App() {

  return (
    <>
      <Header />
      <h1>반가워 리액트!</h1>
    </>
  )
}

export default App

• 참고로 import시에 ES module을 사용하지만 vite에서 확장자 명을 안 써도 되도록 자동 설정되어 있다.

 

JSX - UI 표현하기

const Footer = () => {
    return (
      <header>
        <h1>footer</h1>
      </header>
    )
  }

export default Footer;

• 사실 순수 자바스크립트에서는 html을 return 하도록 만들면 문법적인 오류로 판단한다.
• React 에서는 JSX 문법을 사용하므로 적법하다고 판단한다. JSX : 확장된 자바스크립트

// JSX 주의 사항
// 1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다. (ex. if문X for문X)
// 2. 숫자, 문자열, 배열 값만 렌더링 된다.
// 3. 모든 태그는 닫혀있어야 한다.
// 4. 최상위 태그는 반드시 하나여야만 한다. 마땅한게 없다면 <></> 빈태그로 해도 된다.

const Main = () => {
  const number = 9;
  const obj = { a:1 }

    return (
      <main>
        <h1>main</h1>
        <h2>{number % 2 === 0 ? "짝수" : "홀수"}</h2>
        {[1, 2, 3]}
        {true}
        {obj.a}
      </main>
    )
  }

export default Main;

• JSX 주의 사항
  1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다. (ex. if문X for문X)
  2. 숫자, 문자열, 배열 값만 렌더링 된다.
  3. 모든 태그는 닫혀있어야 한다.
  4. 최상위 태그는 반드시 하나여야만 한다. 마땅한게 없다면 <></> 빈태그로 해도 된다.

조건에 따라서 다르게 렌더링하는 방법

const Main = () => {
  const user = {
    name : "이진주",
    isLogin : true,
  };

  if (user.isLogin) {
    return <div>로그아웃</div>;
  } else {
    return <div>로그인</div>;
  }

    // return (
    //   <>
    //     {user.isLogin ? (<div>로그아웃</div>) : (<div>로그인</div>)}
    //   </>
    // )
  }

export default Main;

• 삼항연산자도 가능하고, 조건문으로도 가능하다.

css 설정하는 방법

if (user.isLogin) {
    return <div 
      style={{
        backgroundColor : "yellow",
        borderBottom : "5px solid blue",
    }}>로그아웃</div>;
  } else {
    return <div>로그인</div>;
  }

• 직접 html 태그에 넣어도 되지만, 복잡할 수 있어서 css 파일을 별도로 만드는 것이 좋다.
• 이 때 style은 기존 css문법이 아닌 jsx의 css문법으로 작성해야 한다.

Main.css

.logout {
    background-color: yellow;
    border-bottom: 5px solid blue;
}

Main.jsx

import "./Main.css";

const Main = () => {
  const user = {
    name : "이진주",
    isLogin : true,
  };

	  if (user.isLogin) {
	    return <div className="logout">로그아웃</div>;
	  } else {
	    return <div>로그인</div>;
	  }
  }

export default Main;

 

출처 : 한입 크기로 잘라 먹는 리액트