React | Component , JSX

keyword Component, JSX

---

리액트로 만든 페이지는 컴포넌트(Component)로 구성되어 있다.

컴포넌트의 장점

1. (비슷한 부분) 코드 재사용 용이
2. 유지/보수가 쉬워짐

JSX(JavaScript XML), Component 규칙

• 모든 컴포넌트 이름은 대문자로 시작
• style은 객체{}로 전달해야 함
• style의 속성명을 Camel-case로 작성해야 함
  style = {{ backgroundColor : "green"}}
• style의 속성값을 문자열로 적어줘야함
  style = {{color: '#fff'}}
• HTML class대신 clssName 사용
  <div className="app">
• 변수값 사용하려면, 중괄호 {변수명}
  => (문자열, 숫자 가능)
  => (Boolean, 객체는 불가 )
  Hello, {name} // Hello, Suji
  Number: {2+3} // Number: 5
• 객체 변수값 사용하려면, 중괄호 {객체명.변수명}
  
  

예제

import "./App.css";

function App() {
  const name = "Suji";

  const naver = {
    name: "네이버",
    url: "http://naver.com",
  };

  return (
    <div className="App">
      <h1
        style={{
          color: "#999",
          backgroundColor: "lightblue",
        }}
      >
        Hello, {name} <br /> Happy {2022 - 1988}!
      </h1>
      <a href={naver.url}>{naver.name}</a>
    </div>
  );
}

export default App;

컴포넌트 만들기

Hello.js

방법 1. Normal Function

const Hello = function () {
  <p>Hello</p>;
};

export default Hello;

방법 2. Arrow Function

const Hello = () => {
  <p>Hello</p>;
};

export default Hello;

방법 3. One liner

export default function Hello() {
  return <p>Hello</p>;
}

---

App.js에 컴포넌트 추가

App.js

import "./App.css";
import Hello from "./Hello";

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

export default App;

Welcome.js

export default function Welcome() {
  return <h2>Welcome</h2>;
}

---

App.js에 컴포넌트 1개 더 추가

App.js

import "./App.css";
import Hello from "./Hello";
import Welcome from "./Welcome";

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

export default App;

---

World.js 컴포넌트 만든 것을

export default function World() {
  return <h3>World!</h3>;
}

Hello.js 에 추가

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

App.js 에도 자동으로 반영됨

---

<참고>
https://www.youtube.com/watch?v=0AinoaApDjc&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=4