두서없이 작성된 내용이며 그날그날 배운 내용을 노트에 정리한 글입니다. 😀
props와 state 차이
- props는 부모 컴포넌트가 설정, 값이 무조건 고정적이진 않음
- state는 컴포넌트 자체적으로 지닌 값,
컴포넌트 내부에서 값을 업데이트할 수 있음
이벤트
- 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것
이벤트를 사용할 때 주의 사항
- 이벤트 이름을 카멜 표기법으로 작성 (
onChange,onClick...) - 실행할 함수 형태의 값(객체)을 이벤트에 전달
- DOM 요소에만 이벤트를 설정할 수 있음 (만든 컴포넌트에는 적용 안됨)
하지만, 전달 받은 props를 내부의 DOM 이벤트로 설정 가능
SyntheticEvent
- 웹 브라우저의 네이티브 이벤트를 감싸는 객체
(네이티브 이벤트와 인터페이스가 같음) - 단, 이벤트가 끝나고나면 이벤트가 초기화 됨
- 비동기적으로 작업할 때 이벤트 객체를 참조할 일이 있을 경우 ->
e.persist()함수를 호출
클래스에서 함수가 호출될 때
- this는 호출부에 따라 결정
- 클래스의 임의의 메서드가 특정 HTML 요소의 이벤트로 등록되는 과정에서 메서드와 this의 관계가 끊어짐
- 임의 메서드가 이벤트에 등록 되어도 this를 컴포넌트 자신으로 가리키기 위해선 메서드를 this와 바인딩(binding) 하는 작업 필요
->this.handle___ = this.handle___.bind(this);
바벨의 transform-class-properties 문법
- 화살표 함수 형태로 메서드 정의
input 여러 개 다루기
- 메서드를 여러 개 만드는 것도 하나의 방법이긴 하지만,
- event 객체를 활용하는 것, e.target.name 값을 사용하여 다룰 수 있음
(input의 name 값을 가리킴)
const name = 'a';
const obj = {[name] : 'apple'};
-> [name] 키는 a를 가리킴
ref
- 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법임
- 전역적으로 사용하지 않고 내부에서만 작동됨
- id 선택자를 쓰려면 중복을 피해서 써야함
- DOM을 꼭 직접적으로 건드려야 할 때 사용
DOM을 꼭 사용해야 하는 상황
- 특정 input에 포커스 주기
- 스크롤 박스 조작하기
- canvas 요소에 그림 그리기 등
-> 이런 경우 ref를 사용
콜백 함수를 통한 ref 설정
- 콜백 함수에 ref값을 파라미터로 전달하고, 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정
<input ref={(ref)=>{this.input=ref}} />
-> input요소의 DOM을 가리킴 (이름은 원하는데로 지정 가능), ex)this.ppby = ref
create Ref를 통한 ref 설정
- 내장되어 있는 함수
- 컴포넌트 내부에서 멤버 변수로
React.createRef()를 담아 줘야 함
❖ 멤버 변수 : 클래스에서 만들어지고 사용되는 변수 - 해당 멤버 변수를 ref를 달고자하는 요소에 ref props를 넣어주면 ref 설졍 완료
- ref를 설정해준 DOM에 접근하려면
this.input.current를 조회
컴포넌트에 ref 달기
- 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에 사용할 때 씀
- 하지만 쓰면 쓸 수록 스파게티 코드가 된다. (쓰기 전 꼭 필요한지 고려)
- 즉, 컴포넌트끼리 데이터를 고류할 경우는 부모↔︎자식 흐름으로 교류
(ง •̀_•́)ง