리액트 기기기초 (33) 썸네일형 리스트형 #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태그라고 생각할 것 컴포넌트를 다른 컴포넌트들 안에 넣어주려면 함수로 만들어준 후 태그 넣듯이 넣어주면 됨 #2.5 JSX jsx 자바스크립트를 확장한 문법 html에서 사용한 문법과 흡사한 문법을 사용하여 리액트 요소를 만듦 Babel jsx로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 것 #2.3 Events in React React.createElement에 두번째 인수에 property를 줄 수 있음 property는 id,style,classname 등등 됨 event listener도 올 수 있음 const btn = React.createElement("button", { onclick: () => console.log("im clicked"), } , "Click me"); #2.2 Our First React Element react-js : 엔진과 같음, 상호작용할 수 있는 UI를 만들게 해줌 react-dom : reactElement를 html에 는 역할 render : react element를 거치고 html로 만들어 배치한다는 것, 사용자에게 보내줌 react는 모든 것이 js로부터 시작됨, 마지막에 html로 끝남, 바닐라js와 정반대의 순서 #2.1 Before React 자바스크립트만으로 버튼을 클릭했을때 카운트를 세어주는 페이지 만들기 html만들기 id,태그 등등 가져오기 addeventlistener로 이벤트 추가 함수만들어서 데이터 업데이트 html 업데이트 Total clicks:0 Click me 리액트 설치 이전 1 2 3 4 5 다음
