🍮 🍮

import { useState } from 'react'; // 각 칸을 나타내는 Square 컴포넌트function Square({ value, onSquareClick }) { return ( {value} );} // 보드 전체 관리하는 Board 컴포넌트function Board({ xIsNext, squares, onPlay }) { function handleClick(i) { // i번째 칸을 클릭했을 때 호출되는 함수 if (calculateWinner(squares) || squares[i]) { // 승자가 이미 있거나, 해당 칸이 이미 채워졌으면 return; } const nextSquares = squares.slice();..

src/assets/폴더import로 불러와야 함public/assets/는 URL(/assets/파일명)으로 접근src/components/폴더여러 페이지에서 공통으로 사용하는 UI 컴포넌트 보관컴포넌트들은 페이지와 독립적으로 동작해야 함src/pages/폴더각 Route에 해당하는 페이지 저장보통 pages/ 안의 컴포넌트는 components/의 재사용 컴포넌트를 조합해서 만듦src/routes/폴더React Router 설정을 따로 분리해서 관리import { Routes, Route } from "react-router-dom";import HomePage from "../pages/HomePage";import ProfilePage from "../pages/ProfilePage";export..

노마드코더의 실전형 REACT Hooka 10가지 강의를 보면서 정리하였다. useState항상 2개의 value 가진 Array를 return한다.class component, did mount, render 역할을 한다.// 함수형 컴포넌트const App = () => { const [item, setItem] = useState(1); const incrementItem = () => setItem(item + 1); const decrementItem = () => setItem(item - 1);}// 클래스형 컴포넌트class App extends React.Component { state = { item: 1 } render() { const {item}..