📌 프로젝트 생성

CRA (create-react-app) 방식이 있지만 Vite라는 툴을 사용해 생성하였다.
Vite는 Vue 창시자 Evan You가 만든 새로운 프론트엔드 도구로 프랑스어로 "빠르다(Quick)"를 의미하며 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.

npm create vite@latest
npm install
npm run dev

📌 JSX

• 컴포넌트는 한 가지 요소만 return이 가능하다.
  즉, 두가지 이상의 태그를 사용하기 위해서는 한 가지 요소로 크게 묶어야 한다.

export dafault function Test(){
	return <>
		<div>test!!</div>
		<div>test!!</div>
	<>
}

• 순수한 JS를 사용하기 위해서는 {}를 사용한다.

export dafault function Test(){
	const js = 123
	return <>
		<div>test!! {js}</div>
		<div>test!! {1+2+3/4}</div>
	<>
}

• Styling : 기존에는 class라는 키워드를 이용하여 클래스 이름을 지정하였지만 JSX에서는 className를 사용한다.

export dafault function Test(){
	return <>
		<div className="name">test!!</div>
		<div>test!!</div>
	<>
}

• 두가지 이상의 component도 export가 가능하다.

function Test(){
	return <>
		<div>test!!</div>
		<div>test!!</div>
	<>
}

function Test2(){
	return <>
		<div>test2!!</div>
		<div>test2!!</div>
	<>
}

export {Test, Test2}

• props에 문자열 말고 다른 형식 전달하기

// 숫자
function App() {

  return (
    <div>
      <Greeter number={20}/>
      <Chicken/>
    </div>
  )
}

// 배열
function App() {

  return (
    <div>
      <Greeter number={[10, 20, 30]}/>
      <Chicken/>
    </div>
  )
}

// object
function App() {

  return (
    <div>
      <Greeter number={{a:"test", b:"test2"}}/>
      <Chicken/>
    </div>
  )
}

• 기본 값 설정하기
  Default 매개변수와 같은 원리이다.

function Greeter({number = 20}) {
    const name = props.person
    return (
        <div>
            Hi there!! {name}
        </div>
    );
}

• 조건문 예시

import React from 'react';

function Dice(props) {
    const ran = Math.floor(Math.random()*3) +1;
    const ran2 = Math.floor(Math.random()*3) +1;
    return (
        <div>
            {ran === ran2 ? <h1>You Win!!</h1> : null}
        </div>
    );
}

export default Dice;

• map
  배열로 넘어온 props의 각각의 요소를 사용하기 위한 방법이다.

import React from 'react';

function ColorList({colors}) {
    const lis = colors.map((color) => <li>{color}</li>);
    return (
        <div>
            <p>Color List</p>
            <ul>{lis}</ul>
        </div>
    );
}

export default ColorList;

import React from 'react';

function ColorList({colors}) {
    return (
        <div>
            <p>Color List</p>
            <ul>
                {colors.map((c) => (<li style={{color : c}}>{c}</li>))}
            </ul>
        </div>
    );
}

export default ColorList;

• 이벤트 처리

만약 handleClick()으로 설정할 경우 버튼을 누르지 않아도 기본적으로 실행이 한번 되기 때문에 이름만 전달해야 한다.

import React from 'react';

function handleClick(){
    console.log("Clicked the Button!!");
}

function Clicker(props) {
    return (
        <div>
            <p>Clcik the button!!</p>
            <button onClick={handleClick}>Button</button>
        </div>
    );
}

export default Clicker;

• form

submit 버튼을 누르면 새로고침이 된다.

일반적으로 리액트 사용 시에는, 단일 페이지 애플리케이션을 만들어 사용자가 리액트로 보게되는 내용을 제어하고 있지만 전체 페이지를 새로고침하지 않기 때문에 이를 막는다.

import React from 'react';

function handleSubmit(e){
    e.preventDefault();
    console.log("submit!!");
}

function Form({message, buttonText}) {
    return (
        <form onSubmit={handleSubmit}>
            <button>Submit</button>
        </form>
    );
}

export default Form;