What 리액트에서 Props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있다는 것은 알고 있다. 이번에는 Props가 배열안의 객체 형태이고, map()을 통해 반복 수행하며 데이터를 조회할 수 있는 방법에 대해서 알아볼 것이다. How /* 최상위 컴포넌트 App */ import List from './List' const App = () => { const nameList = [ { id: 1, name: 'Kim', food: '김치찌개' }, { id: 2, name: 'Lee', food: '된장찌개' }, { id: 3, name: 'Park', food: '순두부찌개' } ] return ( ) } 첫 번째로 최상위 부모 컴포넌트인 App.js에 전달할 데이터 nameL..

Before import React, {useState} from 'react'; const Sample = () => { /* writer useState */ const [writer, setWriter] = useState('Shawn'); const writerHandler = (e) => { setWriter(e.target.value); } /* content useState */ const [content, setContent] = useState(''); const contentHandler = (e) => { setContent(e.target.value); } return ( ) } 위 코드에서 input은 2개이고, 따라서 저장해야 하는 데이터의 값도 2개이기 때문에 useState도..

useState 입력 데이터를 저장하기 위해서는 먼저 useState라는 리액트의 기본 개념을 알고 있어야 한다. useState는 이전 글에서 다루기도 했고, 구글링을 통해 쉽게 알 수 있는 개념이기 때문에 자세한 설명은 하지 않겠다. 그냥 간단하게 정의하자면, 지금 이 글의 제목이 '입력 데이터 저장하기'인데, useState는 거기서 '입력 데이터'를 맡고 있다고 보면 된다. 즉, 입력 데이터를 useState를 이용하여 상태 값으로 저장한다는 뜻이다. onChange 입력 데이터라는 것은 '입력' 이라는 이벤트가 들어간 데이터이다. 즉, 이벤트를 수행했을 때 업데이트된 데이터의 값이라는 뜻이다. 이를 도와주는 게 바로 onChange 이벤트이다. onChange는 데이터의 값이 변경되는 것을 감지..

State State란, 계속해서 변화하는 특정 상태로 상태에 따라 각각 다른 동작을 수행하는 특징을 가진다. 예를 들어 한 웹 사이트가 다크모드와 라이트모드를 각각 지원한다고 할 때, 각각 모드가 State라고 볼 수 있다. /* 리액트의 useState를 사용하겠다. */ import React, {useState} from 'react'; /* count는 상태값, setCount는 상태값에 대한 함수, useState의 (0)은 count의 초깃값 */ const [count, setCount] = useState(0); /* onIncrease 함수는 count를 +1하는 setCount 함수를 실행한다. */ const onIncreae = () => {setCount(count + 1)}; ..