본문 바로가기
반응형

ReactJS6

[영화 웹 서비스]State State - 데이터가 저장되는 곳 !!! 이전 단계의 state를 이용해서 현재 state를 바꾸려 했지만, 결과가 예상과 다르게 나올 수도 있음. 다른데서 바뀌었을수도 있다는 말. state를 바꾸는 2가지 방법 1. setState 함수 - 원하는 값을 직접 넣어준다 setCounter(counter+1); setCounter(90); 2. 이전 값을 바탕으로 현재 값을 계산 - 함수를 전달하기 setCounter((current) => current+1); useState 1. 사용자들의 input을 어떻게 얻는지 2. form을 만들었을 때 state는 어떤식으로 작용하는지 주의!!! class, for 등 이미 js에서 사용하는 단어는 jsx에서 html용으로 사용하면 오류가 난다. html의.. 2022. 3. 18.
[영화 웹 서비스]The Basics of React react js vs vanilla js - reactjs는 UI를 interactive 하게 만든다(=웹사이트에 interactivity를 만들어준다) - 화면에 버튼 하나와 텍스트 하나 - 버튼을 클릭할 때마다 화면의 텍스트를 업데이트(클릭 수를 센다) - reactjs는 UI에서 바뀐 부분만 업데이트 해준다, 이전에 렌더링된 컴포넌트는 어떤 거였는지 확인, 그리고 다음에 렌더링될 컴포넌트는 어떤거지를 보고, "다른 부분"만 파악한다. 여러가지 요소를 리렌더링하려고 해도 전부 다 새로 생성죄지는 않는다 (콘솔 창에서 확인해 볼 수 있음, vanillajs에서는 모든 부분이 업데이트) 1. 바닐라JS앱 - document.getElementById나 querySelector를 이용해서 그 버튼을 찾는다.. 2022. 3. 16.
반응형