본문 바로가기

분류 전체보기

 (185)
#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에서 바뀐 부분만 업데이트해줌 이전에 렌더링된 컴포넌트는 어떤거였는지 확인, 다음에 렌더링될 컴포넌트는 어떤지를 보고 다른 부분만 파악 ->가상돔을 써서 우리 시야에 보이는 부분만 수정해서 보여주고 모든 업뎃이 끝나면 일괄로 합쳐서 실제 돔에 던져줌
#2.6 JSX part Two 직접만든 컴포넌트의 첫 글자는 반드시 대문자여야 함 소문자면 react랑 jsx는 html button태그라고 생각할 것 컴포넌트를 다른 컴포넌트들 안에 넣어주려면 함수로 만들어준 후 태그 넣듯이 넣어주면 됨

티스토리툴바