Component

import React from 'react'; // 선언적 함수 - 함수형 컴포넌트 선언 function FunctionalComponent() { return ( <div> <h1>Hello, Functional Component!</h1> <p>This is a simple functional component.</p> </div> ); } export default FunctionalComponent;

import React from 'react'; // 익명 함수(화살표 함수) - 함수형 컴포넌트 정의 const FunctionalComponent = (props) => { return ( <div> <h1>Hello, Functional Component!</h1> <p>This is a simple functional component.</p> </div> ); }; export default FunctionalComponent;

import React, { useState, useEffect } from 'react'; const ExampleComponent = () => { // useState: 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 Hook const [count, setCount] = useState(0); // useEffect: 함수형 컴포넌트에서 부수 효과(사이드 이펙트)를 수행할 수 있게 해주는 Hook useEffect(() => { document.title = `Count: ${count}`; // 컴포넌트가 마운트되거나 count 값이 변경될 때마다 실행되는 부수 효과 // 여기서는 문서의 제목을 업데이트하는 예시를 보여줍니다. // 이렇게 useEffect를 사용하면 렌더링 직후 또는 값이 변경될 때 특정 작업을 수행할 수 있습니다. // useEffect의 두 번째 매개변수로 배열을 전달하면 해당 값이 변경될 때만 실행됩니다. // 만약 빈 배열을 전달하면 컴포넌트가 처음 마운트될 때만 실행됩니다. }, [count]); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }; export default ExampleComponent;

import React from 'react'; class ClassComponent extends React.Component { render() { return ( <div> <h1>Hello, Class Component!</h1> <p>This is a simple class component.</p> </div> ); } } export default ClassComponent;

import React, { Component } from 'react'; class LifecycleExample extends Component { // 이 메소드는 컴포넌트가 DOM에 추가된 후에 자동으로 호출됩니다. componentDidMount() { console.log('컴포넌트가 마운트되었습니다.'); } // 이 메소드는 컴포넌트가 DOM에서 제거되기 전에 자동으로 호출됩니다. componentWillUnmount() { console.log('컴포넌트가 언마운트될 예정입니다.'); } // render 메소드는 모든 React 컴포넌트에서 필수적으로 존재해야 합니다. render() { return <div>컴포넌트 라이프사이클 예제</div>; } }

npx create-react-app state-app

import React from 'react' class ClassComponent extends React.Component { constructor(props) { super(props); // 상태 정의 this.state = { name: "Aloha", }; // this 바인딩 this.handleClickAloha = this.handleClickAloha.bind(this); this.handleClickJoeun = this.handleClickJoeun.bind(this); } handleClickAloha() { console.log('Aloha Click!'); // 상태 설정 this.setState({ name: 'Aloha' }); } handleClickJoeun() { console.log('Joeun Click!'); // 상태 설정 this.setState({ name : 'Joeun' }); } render() { const { name } = this.state; return ( <div> <h1>클래스 컴포넌트</h1> <h2>Hello I'm {name}</h2> <button onClick={this.handleClickAloha}>Aloha</button> <button onClick={this.handleClickJoeun}>Joeun</button> </div> ) } } export default ClassComponent

import React, { useState } from 'react'; const FunctionComponent = () => { // useState를 사용하여 name이라는 상태와 이를 갱신할 수 있는 setName 함수를 선언 const [name, setName] = useState('Aloha'); // handleClick 함수 정의 const handleClick = (newName) => { console.log(`${newName} Click!`); // setName 함수를 사용하여 name 상태를 갱신 setName(newName); }; return ( <div> <h1>함수형 컴포넌트</h1> <h2>Hello I'm {name}</h2> {/* 버튼 클릭 시 handleClick 함수 호출 */} <button onClick={() => handleClick('Aloha')}>Aloha</button> <button onClick={() => handleClick('Joeun')}>Joeun</button> </div> ); }; export default FunctionComponent;

const [name, setName] = useState('Aloha');

import logo from './logo.svg'; import './App.css'; import ClassComponent from './component/ClassComponent'; import FunctionComponent from './component/FunctionComponent'; function App() { return ( <> <ClassComponent /> <hr></hr> <FunctionComponent /> </> ); } export default App;

npm start

npx create-react-app props-app

.card { border: 1px solid #ccc; padding: 10px; margin: 10px; }

import React from 'react'; const Card = (props) => { return ( <div className='card'> <h3>{props.title}</h3> <p>{props.content}</p> </div> ); }; export default Card;

import React from 'react'; import Card from './Card'; const CardList = () => { // Card 컴포넌트에 전달할 데이터 배열 const cardData = [ { no: 1, title: 'Card 1', content: 'Content for Card 1' }, { no: 2, title: 'Card 2', content: 'Content for Card 2' }, { no: 3, title: 'Card 3', content: 'Content for Card 3' }, ]; return ( <div> <h1>Card List</h1> {/* <Card key={0} title={cardData[0].title} content={cardData[0].content} ></Card> */} {/* <Card key={1} title={cardData[1].title} content={cardData[1].content} ></Card> */} {/* <Card key={2} title={cardData[2].title} content={cardData[2].content} ></Card> */} {cardData.map((card, index) => { return <Card key={card.no} title={card.title} content={card.content} /> })} </div> ); }; export default CardList;

import './App.css'; import CardList from './Component/CardList'; function App() { return ( <> <h1>Props 실습</h1> <CardList /> </> ); } export default App;

npm start

import React, { Component } from 'react'; class MyComponent extends Component { render() { // UI를 반환하는 부분 return ( <div> <h1>Hello, World!</h1> </div> ); } } export default MyComponent;

import React from 'react'; const MyComponent = () => { // UI를 반환하는 부분 return ( <div> <h1>Hello, World!</h1> </div> ); }; export default MyComponent;

import React, { Component } from 'react'; class LifecycleExample extends Component { constructor(props) { super(props); console.log('constructor: 컴포넌트가 생성 중입니다.'); this.state = { data: null, }; } static getDerivedStateFromProps(nextProps, prevState) { console.log('getDerivedStateFromProps: nextProps와 prevState를 받습니다. 상태를 업데이트하려면 객체를 반환하고, 그렇지 않으면 null을 반환합니다.'); return null; } componentDidMount() { console.log('componentDidMount: 컴포넌트가 DOM에 마운트되었습니다.'); // 비동기 작업, 데이터 가져오기 등을 수행합니다. this.fetchData(); } shouldComponentUpdate(nextProps, nextState) { console.log('shouldComponentUpdate: 컴포넌트가 다시 렌더링되기 전에 호출됩니다. 불리언 값을 반환합니다.'); return true; } getSnapshotBeforeUpdate(prevProps, prevState) { console.log('getSnapshotBeforeUpdate: 가상 DOM에서 실제 DOM으로 변경 사항이 반영되기 전에 호출됩니다.'); return null; } componentDidUpdate(prevProps, prevState, snapshot) { console.log('componentDidUpdate: 컴포넌트가 DOM에서 업데이트된 후에 호출됩니다.'); } componentWillUnmount() { console.log('componentWillUnmount: 컴포넌트가 DOM에서 제거되기 전에 호출됩니다.'); } fetchData() { // 비동기 작업을 시뮬레이션합니다. setTimeout(() => { console.log('데이터를 성공적으로 가져왔습니다!'); this.setState({ data: '가져온 데이터' }); }, 2000); } render() { console.log('render: 컴포넌트를 렌더링 중입니다.'); return ( <div> <h1>컴포넌트 생명주기 예제</h1> <p>데이터: {this.state.data}</p> </div> ); } } export default LifecycleExample;

npx create-react-app event-app

import React, { useState } from 'react' const Product = () => { // 상태 const [quantity, setQuantity] = useState(1); const price = 1000; // 상품 단가 // 수량 증가 함수 const increaseQuantity = () => { setQuantity(quantity + 1); }; // 수량 감소 함수 const decreaseQuantity = () => { if( quantity > 1 ) { setQuantity(quantity - 1); } }; // 총 가격 계산 const totalPrice = price * quantity; return ( <div> <h2>상품 정보</h2> <ul> <li>가격 : {price}</li> <li>수량 : {quantity}</li> <li>총 가격 : {totalPrice}</li> </ul> <button onClick={increaseQuantity}>+</button> <button onClick={decreaseQuantity}>-</button> </div> ) } export default Product

import logo from './logo.svg'; import './App.css'; import ClassComponent from './component/ClassComponent'; import FunctionComponent from './component/FunctionComponent'; function App() { return ( <> <Product /> </> ); } export default App;

npm start