2023-02-04(컴포넌트 기본실습)

😎😎컴포넌트 만들어보기(버튼구현)

import React from 'react';

function App() {
    function buttonClick () {
        alert("클릭")
    }

  return (
    <div style={
      {
      
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    }}
    >
        <span>이곳은 내가 만든 컴포넌트입당!</span>
        <button onClick={buttonClick}>
        클릭
        </button>   
    </div>
  )

자바스크립트 영역(return위)에서 변수 선언 방법을 두가지로 해보겠다.

• 1. 그냥 함수 쓰기
     function (buttonClick) = {
     alert("클릭")
     }
• 2. 화살표 함수 쓰기
     const buttonClick () => {
     alert("클릭")
     }
     = const buttonClick x => alert("클릭")과 같다
• 3. 그냥 쟉스 문법영역에 하기
     <button
     onclick = {function () {
     alert("클릭") }
     클릭
     <button /

😎😎 쟉스문법에서 스타일 꾸미기를 더 알아봅시당

색을 바꿔볼건데요.
import React from 'react'       //"rfc" or "rfce" 



export default function App() {
  const number = 1;
  const pTagStyle = {
    color : "red",
  }

  return  <div>
            <p style = {pTagStyle}>안녕하세요 리액트입니다</p>
            {/* 주석을 사용하는 방법입니다 */}
            {/* 삼항 연산자를 사용해볼게요 */}
            <p style = {pTagStyle}>
              {
              number > 10 
              ? number + "은 10보다 크다" 
              : number + "은 10보다 작다"
              }
            </p>
          </div>
}

위는 js영역에 색 변수와 숫자 변수를 준 뒤 jsx영역 {}안에 그것들을 넣어주는 쉬운 방법을 썼습니다.

😎😎부모 컴포넌트 실습

import React from 'react'


function Son() {
  return <div>나는 바보랍니다.</div>
}

function Mother() {
  return <Son />
}

function App() {
  return <Mother/>
}

export default App

자식 컴포넌트의 div내용이 --> 엄마 -->App으로 가서 렌더링 된다.