책 한권으로 시작하는 react (2)

ppby·2020년 7월 1일
1

페퍼보이 TIL

목록 보기
3/11
post-thumbnail

두서없이 작성된 내용이며 그날그날 배운 내용을 노트에 정리한 글입니다. 😀

props와 state 차이

  • props는 부모 컴포넌트가 설정, 값이 무조건 고정적이진 않음
  • state는 컴포넌트 자체적으로 지닌 값,
    컴포넌트 내부에서 값을 업데이트할 수 있음

이벤트

  • 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것

이벤트를 사용할 때 주의 사항

  1. 이벤트 이름을 카멜 표기법으로 작성 (onChange, onClick...)
  2. 실행할 함수 형태의 값(객체)을 이벤트에 전달
  3. 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을 컴포넌트 외부에 사용할 때 씀
  • 하지만 쓰면 쓸 수록 스파게티 코드가 된다. (쓰기 전 꼭 필요한지 고려)
  • 즉, 컴포넌트끼리 데이터를 고류할 경우는 부모↔︎자식 흐름으로 교류
profile
배움의 즐거움(ง •̀_•́)ง 

0개의 댓글