분류 전체보기 (98) 썸네일형 리스트형 #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 #3.2 setState part Two State를 사용하는 방법은!! 변수에 데이터를 담고 변수를 컴포넌트에 연결하고 해당 변수에 담긴 값을 바꾼다 입니당 ^0^ #3.1 setState part One setState를 사용하려면 면저 할당을 해야 함 function App () { const [counter, modifier] = React.useState(0); return( Total clicks: {counter} Click me ); } const App = () => { const [counter, modifier] = React.useState(0); return ( component ); }; #3.0 Understanding State state : 데이터가 저장되는 곳 js body, span등등이 다 업데이트 됨 ->노드정보가 바뀔때마다 노드트리를 처음부터 다시 5단계에 걸쳐서 생성 react ui에서 바뀐 부분만 업데이트해줌 이전에 렌더링된 컴포넌트는 어떤거였는지 확인, 다음에 렌더링될 컴포넌트는 어떤지를 보고 다른 부분만 파악 ->가상돔을 써서 우리 시야에 보이는 부분만 수정해서 보여주고 모든 업뎃이 끝나면 일괄로 합쳐서 실제 돔에 던져줌 이전 1 2 3 4 5 6 7 ··· 13 다음
