[React] React Component, JSX 기초

모든 함수 컴포넌트는 대문자로 시작한다.

 

아래는 JSX 문법 연습용이다.

 

function App() {
  const name = "JY";
  const naver = {
    name : '네이버',
    url : 'https://naver.com'
  };

  return <div className="App">
    <h1 style={{
      color: "#333",
      backgroundColor: "lightgray",
    }}>
      Hello, {name}!
    </h1>
    <a href={naver.url} target="_blank" style={{
      color: "#fff",
      backgroundColor: "green",
      textDecoration: "none"
    }}>{naver.name}</a>
  </div>;
}

 

css style 적용 시에는 객체 감싸듯이 중괄호를 사용해 적용한다.

 

하나의 컴포넌트에는 하나의 태그만 적용 가능하기 때문에 return ‘<div className=”Class1”><div className=”Class2”>’ 이런 식으로는 사용을 못한다고 한다.

아래는 결과물이다.

 

 

 

 

 

 

 

 

 

 

 

‘component’ 디렉토리를 하나 만들어 내부에 ‘Welcome.js’, ‘Hello.js’, ‘World.js’ 총 3개의 파일을 생성한다.

Welcome.js

export default function Welcome() {
    return <h1>WELCOME</h1>
}

World.js

export default function World() {
    return <strong>WORLD!</strong>
}

Hello.js

import World from "./World"

export default function Hello() {
    return <strong>HELLO <World/></strong>;
}

 

컴포넌트들은 만들어만 놓으면 ‘import 파일명 from ‘경로’ 를 통해 쉽게 사용이 가능하다.

App.js

import './App.css';
import Hello from './component/Hello';
import Welcome from './component/Welcome';

function App() {
  return <div className="App">
    <Welcome />
    <Hello />
  </div>
}

export default App;