[React] 컴포넌트와 JSX

01. 컴포넌트

- 주의사항

- 컴포넌트를 만들 때 반드시 가장 첫 글자는 **대문자**로 만들어야 합니다.
- 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓습니다.

✔︎ 예제

import React from 'react';
function App() {
  const handleClick = () => {
    alert('클릭!');
  }; 

  return (
  /* <---- HTML/JSX 영역  ----> */
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
   <span>이것은 내가 만든 App컴포넌트 입니다</span>
      <button onClick={handleClick}>클릭!</button>
    </div>
  );
}

export default App;

02. 부모-자식 컴포넌트

화면에 보여지게 하기 => Rendering
함수로 만들어진 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 이 방식 => JSX

function App() {
  return <div>
    <h1>부모자식관계테스트</h1>
    <Grandpa />    
  </div>;
}
export default App;



function Grandpa (){
  return <div>나는 할아버지입니다.
    <Mother />
  </div>
}
function Mother (){
  return <div>
    <p>나는엄마입니다.</p>
    <Child />
    </div>
} 
function Child (){
  return <div> 나는 자식입니다.</div>
}


*----------------------------------------*


import React from 'react';
  const App = () => {
    const NUMBER = 1000;
    const pTagStyle ={
      color: "orange",
      fontSize:"20px",
    };

    return(
    <div>
      <div>{NUMBER}</div>
        <p style={pTagStyle}>첫번째줄</p>
    </div>
    );

  }


export default App;


*----------------------------------------*

import React from 'react';
  function App() {
    return <Grandpa />;
  }
    function Grandpa() {
      const name = "르탄이"
      return <Mother name={name}/>;
    }
      function Mother(props) {
        const name = props.name;
        return <Child name ={name} />;
      }
        function Child (props) {
          const name = props.name;
          return <div>{name}</div>;
        }//child가 "르탄이"라는 이름 획득.

export default App;


function App() {
  return (
    <Layout>
      <div>동적으로 바뀌는 부분</div>
      </Layout>
  );
}
export default App;

function Layout(props){
  const children = props.children
  return(
  <main>
    <header>hi</header>
  {children}
  <footer>bye</footer>
    </main>
  );
}

이렇게 변화도 가능하다.

const App =()=>{
  const title ="제목입니다.";

  return (
    <div>
      <h1>추출테스트</h1>
      <Todo title={title} />
    </div>
  );
};
export default App;

const Todo= ({title}) =>{

  return (
    <div>
      <h3>{title}</h3>
      투두입니다.
    </div>
  );
};

03. JSX

HTML을 품은 JS ⇒ JSX!

const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;

✔︎ 무조건 한개의 엘리먼트를 반환하기

import "./App.css";

function App() {
  return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type="text" />
    </div>
  );
}

export default App;

✔︎ JSX에서 javascript 값을 가져오려면? => 중괄호를 쓴다!

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

function App() {
  const number = 1;

  return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      {/* JSX 내에서 코드 주석은 이렇게 씁니다 :) */}
      {/* 삼항 연산자를 사용했어요 */}
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}

export default App;

p태그 안에 {}중괄호로 js 값 가져온다!

✔︎ class 대신 className

<div className="App">

✔︎ 인라인으로 style 주기

<p style={{color: 'orange', fontSize: '20px'}}>orange</p>


function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

style이라는 스타일 객체를 변수로 만들고 대입하면 깔끔!