EventPractice.jsimport React, { useState } from 'react';const EventPractice = () => { const [form, setForm] = useState({ username: '', message: '' }); const onChange = (e) => { // 기존의 form 내용을 이 자리에 복사 한 뒤 원하는 값을 덮어 씌우기, 스프레드 연산자 const nextForm = { ...form, [e.target.name]: e.target.value } setForm(nextForm); }; const onClick = () => { alert(`${form.userna..

App.jsimport PropTypes from 'prop-types';const App = ({ name = '홍길동', children }) => { return ( {name} )}App.propTypes = { name: PropTypes.string.isRequired // 문자열이면서 필수 요소}export default App;

useFetch.jsimport { useState, useEffect } from 'react';function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await fetch(url); if (!response.ok) throw new Error("데이터 가져오기에 실패했습니다."); const resu..

useWindowSize.jsimport { useState, useEffect } from "react";function debounce(func, delay) { // 디바운스 함수 let timer; return function (...args) { clearTimeout(timer); timer = setTimeout(() => func(...args), delay); };}function getWindowSize () { return { width: window.innerWidth, height: window.innerHeight, };};function useWindowSize() { const [windo..

useEffect(() => { console.log('1. mounted'); return () => { console.log('3. unmounted'); } }, []); useEffect(() => { console.log('2. updated'); }, [status]); 실무에서는 서버 API 요청 후 수신 시 많이 사용됨

import { useState } from "react";import styled from 'styled-components';const ModuleProfile = styled.div` padding: 20px 20px; border: solid 1px #000; text-align: left;`;function Profile({ name }) { const [status, setStatus] = useState('Available'); console.log('Profile Rendered') return ( Name: {name} Sta..

설치npm install && npm install styled-components Blocks.jsximport styled from "styled-components";// tagged template literalconst Wrapper = styled.div` padding: 1rem; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; background-color: ${(props) => props.backgroundColor || 'lightgrey'};`;// styled-components의 shouldForwardProp을 사용하여 비표준 props (id, class..

ThemeContext.jsximport React from "react";const ThemeContext = React.createContext(); // context 생성, 초깃값 설정 없음, 프로바이더에서 설정ThemeContext.displayName = "ThemeContext"; // 개발자 도구에 표시하기 위함export default ThemeContext; MainContext.jsximport { useContext } from "react"; // useContext 훅 사용import ThemeContext from "./ThemeContext";function MainContent(props) { // ThemeContext 로부터 현재설정 테마값을 받아와 실제화면에 렌더링 ..

TemperatureInput.jsx// state 는 제거되었고, 오로지 상위 컴포넌트의 props 만 사용됨const scaleNames = { c: "섭씨", f: "화씨",};function TemperatureInput(props) { const handleChange = (event) => { props.onTemperatureChange(event.target.value); // 2. 상위 컴포넌트로 변경된 값을 전달 }; return ( 온도를 입력해주세요 (단위: {scaleNames[props.scale]}) );}expor..

SignUp.jsximport React, { useState } from "react";function SignUp(props) { const [name, setName] = useState(""); // 초기값은 빈 문자열 const [gender, setGender] = useState("남자"); // 초기값은 "남자" const handleChangeName = (event) => { setName(event.target.value); // 입력된 값을 name 상태로 업데이트 }; const handleChangeGender = (event) => { setGender(event.target.value); // 선택된 값을 gender 상태로..