prop (2) 썸네일형 리스트형 [React] state 1. Prop과 State Prop과 State는 모두 이 값이 변경되면 새로운 return값을 만들어서 UI를 바꾼다. 이 둘의 차이점은, prop은 컴포넌트를 사용하는 외부자를 위한 데이터 state는 컴포넌트를 만드는 내부자를 위한 데이터 2. state state를 사용하기 위해서는 {useState}를 import해주어야 한다. import { useState } from "react"; useState는 배열로 저장이 되는데, state의 값은 index 0에 저장되어 있고, state를 바꿀 때는 index 1에 있는 함수로 바꾼다. const _mode = useState('WELCOME'); const mode = _mode[0] # state(현재는 'WELCOME'이 저장) const.. [React] Props 1. Props props는 데이터를 전달하기 위해 사용한다. 아래의 코드를 보면, {props.title}를 통해 Header 컴포넌트를 사용할 때 title로 주었던 REACT라는 데이터를 전달해주었다. # Header 컴포넌트 function Header(props) { return ( {props.title} ); } # Header 컴포넌트 사용 function App() { return ( ); } 2. Props 활용 topics라는 배열을 만들고, for문을 사용해 배열에 있는 내용들을 리스트로 만들었다. for문에 있는 t는 props.topics[i]으로 각 배열의 요소들을 나타내고, t.id와 t.title은 각 요소에 있는 id값과 title값을 받아와서 리스트를 구성하도록 한다. .. 이전 1 다음
