리액트 기기기초 (33) 썸네일형 리스트형 #4.0 Props 어떤 props든 btn컴포넌트에 보내면 그것들은 Btn컴포넌트의 첫번째 인자속으로 들어감 props는 첫번째이자 Btn이 전달받는 유일한 인자 props는 우리가 보낸 모든 것들을 받는 오브젝트 아래 두개는 똑같음 #3.9 Final Practice and Recap 컴포넌트는 그 안에 다른 컴포넌트를 렌더링 할 수 있음 index안에 어떤 데이터가 있는지에 따라 Minutes & Hours를 그릴지 Km & Mile를 그릴지 결정함 {}안에는 JS를 쓸 수 있음 App 컴포넌트가 state를 가지도록 만들자 #3.8 Recap state를 바탕으로 ui를 변경 #3.7 State Practice part Two #3.6 State Practice part One #3.5 Inputs and State 리액트에서는 class -> className for -> htmlFor 단위 변환기(value를 인식하는 부분) function App() { const [minutes, setMinutes] = React.useState(); const onChange = (event) => { setMinutes(event.target.value); }; return ( Super Converter Minutes You want to convert {minutes} Hours ); //변수를 컴포넌트에 연결 } #3.4 State Functions state를 바꾸는 방법 직접 값 설정 함수 사용 setCounter(counter + 1); setCounter((current)=> current + 1); //함수사용하는 이 방법이 더 안전함, (현재의 값을 보장해주므로) //현재의 state값을 가지고 새로운 값 계산 #3.3 Recap modifier 함수를 가지고 state를 변경할 때(어플리케이션의 데이터를 바꿀 때) 컴포넌트가 재생성(리렌더링) 됨 -> 새로운 값을 가지고 리렌더링 -> 데이터가 바뀔때마다 컴포넌트를 리렌더링하고 ui를 refresh 이전 1 2 3 4 5 다음
