오늘은 React에서 props, state가 무엇인지, 이벤트 처리를 props와 state를 통해 하는 방법에 대해서 배울 수 있었다.
JSX내에서의 DOM 요소 속성 작성
- 기본적 DOM Element의 Attribute 는 카멜 케이스로 작성
- tabIndex: 키보드 Tab 키를 눌렀을 때 포커스의 이동 순서
- className
- data- 또는 aria-로 시작하는 Attribute는 예외
- data-: 태그 내에 별도의 값을 저장할 수 있음
- aria-: 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션에 쉽게 접근할 수 있는 방법을 정의
- HTML의 Attribute와 다른 이름을 가지는 Attribute가 존재
- checked ➡️ defaultChecked
- value ➡️ defaultValue
- React에서만 쓰이는 새로운 Attribute 존재
- key: map함수 등으로 여러 Component 또는 태그 생성 시 서로 간의 구분을 위해 정
- dangerouslySetInnerHTML: 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법
(위험하다는 것을 상기, XXS 공격)
Props
- 컴포넌트에 값을 넘겨줄 때 사용
- 변수, 함수, 객체, 배열 등 자바스크립트의 모든 요소 넘길 수 있음
- 컴포넌트의 재사용을 위해 사용
- Props의 값 임의 변경 시 재렌더링을 할 수 있어, 새로운 변수를 선언하는 것을 추천
State
- 컴포넌트 내에서 유동적으로 변할 수 있는 값을 저장
- State 값의 변경 시 React가 자동으로 계산해 변경된 부분을 렌더링 함
- 값 변경 시 setState 함수를 사용해야 함
- 현재 값을 기반으로 State를 변경하고자 할 때 setState 함수에 함수를 넣는 것을 권장
- Object 형태의 State를 가질 때 값 변경 시 Object내의 값을 변경하기 보다는 새로운 Object를 생성하는 것을 추천
이벤트 처리
- 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생
- 유저에 의해, 또는 개발자가 의도한 로직에 의해 발생
- 핸들링 함수를 별도로 선언하거나, 익명 함수로 작성 가능
- 이벤트 객체를 매개변수로 전달 가능
- 이벤트 형태에 따라 전달되는 이벤트 객체의 내용이 다름
- 이벤트 발생 원인, 이벤트가 일어난 Element의 정보를 얻을 수 있음
예시
- onClick
- onChange
- onKeyDown, onKeyUp, onKeyPress
- onDoubleClick
- onFocus
- onBlur: Element가 Focus를 잃었을 때
- onSubmit
#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript