[React] State, setState
·
개발새발개발/React
State - 현재 가지고 있는 형태나 모양을 정의- 컴포넌트의 상태를 의미- 변화할 수 있는 동적인 값- 상태변화를 감지해 자동으로 리렌더링을 함- 하나의 컴포넌트에 여러개의 state를 생성할 수 있음   - 두 가지 요소가 전달되는 것을 확인할 수 있음   - 첫번째 요소 : 새롭게 생성된 state의 값(초기값). 인수로 전달받음- 두번째 요소 : 상태 변화 함수(state를 변경시키는 함수)    - 그렇기 때문에 대부분의 경우 구조분해할당으로 받음   state 변경   - setState를 활용함   Count로 수 늘려보기 - +버튼을 클릭할 때마다 변경 사항을 감지해 리렌더링해줌   전구 키고 끄기  - 삼항 연산자를 사용하여 보기 좋게 만들 수 있음  import './App.css'i..
React 이벤트 핸들링
·
개발새발개발/React
이벤트 핸들링사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것onmouseover, onclick, onchange 등 이벤트를 사용할 때 주의사항1. 이벤트 이름은 카멜 표기법으로 작성한다onclick (X) onClick(O)onkeyup(X) onKeyUp(O) 2. 이벤트에는 함수 형태의 값을 전달한다실행할 자바스크립트 코드를 직접 전달하지 않고, 함수 형태의 객체를 전달한다화살표 함수를 바로 만들어 전달해도 되고, 렌더링 부분 외부에 미리 만들어서 전달해도 된다 3. DOM 요소에만 이벤트를 설정할 수 있다div, button, input, form, span 등의 요소에는 DOM 이벤트를 설정할 수 있다하지만 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다ex) MyComp..