리액트14 [React] State 업데이트 되는 시점 값이 바로 반영되지 않는 코드export default function Player({name, symbol}) { const [isEditing, setIsEditing ] = useState(false); function handleEditClick() { setIsEditing(!isEditing); // schedules a state update to true setIsEditing(!isEditing); // schedules a state update to true } ...}컴포넌트가 처음 실행될 때 handleEditClick()은 해당 컴포넌트의 내장 함수이기에 isEditing의 시작 값을 저장한다. handleEditClick() 이벤트가.. 2024. 7. 21. [React] id 전달하기 // Examples.jsximport Section from "./Section.jsx";export default function Examples() { ... return ( ... );}위 코드에서 컴포넌트에 있는 id 속성은 스타일 적용 시 필요한 값이다.// Section.jsxexport default function Section({ title, children }) { return ( {title} {children} )} 하지만 에서 넘겨받는 id가 에 적용되진 않는다. 그럼 Section 컴포넌트에 인자로 id 속성을 추가하면 될까?// Section.jsxexport default.. 2024. 7. 21. [React] 컴포넌트를 언제 분리해야 할까? function App() { const [selected, setSelected] = useState(); function handleSelect(selectedButton) { ... } let tabContent = Please select a topic.; if (selected) { tabContent = ( ... ); } return ( Core Concepts {CORE_CONCEPTS.map((item) => ( ))} Examples .. 2024. 7. 10. [React] Fragment(프레그먼트) 사용법 왜 return 다음에 가 들어갈까? function App() { return ( );} jsx 파일에서 return을 보면 굳이 로 감싸고 있다. div를 뺀다면? return ( );에러가 발생한다.JSX expressions must have one parent element.JSX 표현식에는 하나의 상위 요소가 있어야 한다.return 값이 2개의 요소여서 에러가 발생하는 것이다.자바스크립트는 하나의 값만 반환할 있다.하나의 요소만 반환하기 위해 로 감싸는 것이다. 불필요한 를 안쓰려면? 1. Fragment 프레그먼트import { useState, Fragment } from 'react';function App() { r.. 2024. 7. 10. [React] 리스트 데이터 동적 출력 //data.jsexport const CORE_CONCEPTS = [ { image: componentsImg, title: 'Components', description: 'The core UI building block - compose the user interface by combining multiple components.', }, { ... }, ...import { CORE_CONCEPTS } from "./data.js"; 데이터를 출력하기 위해 4개의 CoreConcept 컴포넌트가 사용되고 있다.만약 4개의 데이터 중 한 개가 사라지면 해당 영역에 빈 내용을 보여줄 것이다.불필요한 반복 코드를 줄여야 한다.데이터 소스가 변경되면 컴포.. 2024. 7. 10. [React] UI 업데이트 State Hooks function App() { let tabContent = 'Please click a button'; function handleSelect(selectedButton) { tabContent = selectedButton; console.log(tabContent); } return ( handleSelect("components")}> Components handleSelect("jsx")}>JSX handleSelect("props")}>Props handleSelect("state")}>State {tabContent} );}버튼을 클릭하면 tabContent 변수가 handleSe.. 2024. 7. 9. 이전 1 2 3 다음 반응형