HappyTomatoLife

#3 State 준비물 #3.0 Understanding State step 1. 바인딩 Total click : {counter} Click me step 2. UI 업데이트 function render(){ ReactDOM.render(, root);// 페이지에 위치시키기 } React.JS는 딱 변경된 부분만 업데이트된다. => 이걸 이용해서 인터렉티브한 웹을 만들 수 있다. #3.1 setState part One 1. 컴포넌트를 추가하고 싶을 때 {} 안에 넣으면 됨 2. UI를 업데이트하고 싶다면, render()를 호출할 것 리랜더링을 하는 더 효율적인 방식이 있을까? 어디에 데이터를 받을 수 있을까? 리액트 js에는 적절한 툴이 있음. const data = React.useState()..

#3.0 Understanding State React.js의 state : 데이터가 저장되는 곳 예시를 전체 구현하려면, state를 이용해주어야 한다. JSX React Element를 함수 안에 넣으면, 원하는 만큼 사용할 수 있다. 재활용 가능함. 함수라서 ㄷㄷ - 최고는 아닌 FM 방식 리액트에서는 중괄호를 열고 변수 이름을 넣어주면 된다. 변수들을 연결해줄 수 있음 => React.js는 바뀐 부분만 업데이트해준다. => 인터렉티브한 어플리케이션을 만들기 좋은 특성 #3.1 setState part one - 중괄호로 변수 연결해줄 수 있다. - ui 업데이트 하고 싶으면, render를 해주면 됨 - 랜더링하더라도 바뀐 부분만 새로 생성해주어서 인터렉티브한 어플리케이션을 개발하기 좋음- 데이..

#2.0 Introduction ReactJS는 어떤 문제를 해결하기 위해 만들어졌는가? ReactJS는 UI를 interactive하게 만들어준다. - 예를 들기 위해 바닐라JS를 이용한 프로그램을 만들 것 - ReactJS는 매우매우매우 간단해짐 #2.1 Before React 바닐라JS 어플리케이션을 만들어보자. 버튼을 몇 번 클릭했는지 확인해준다. Total clicks : 0 Click me - html 생성 - javascript로 듣기 - html에 반영해주기 이걸 리액트로는 안 해도 된다. #2.2 Our First React Element React.. 설치 없이 불러오면 되는 거였다 ㄷㄷ => React 의 규칙 1. html 코드를 직접 작성하지 않는다. - 리액트는 어플리케이션을 i..

=> ReactJS를 배우는 건 최고의 투자!! #1.2 Why React 시간이 가장 중요한 자원 - 누가 그 기술을 사용하는지 - 얼마나 중요한 것인지 등등 44%가 ReactJS 사용함 그리고 매우 중요한 툴이다. ReactJS는 그냥 JavaScript 기본이기 때문에 커뮤니티가 매우 크다 기술에 대한 에코시스템이 있어야 한다. #1.3 Requirements 바닐라 JS는 무조건 들었어야 함 ReactJS 입문자를 위한 강의임