풀스택 웹개발 부트캠프 12주차 (3)

Event Handling

• 리액트의 이벤트는 카멜 케이스(camelCase) 이용
• JSX를 사용해 이벤트 핸들러 전달
• 기본 DOM 요소에만 이벤트 설정 가능
  💥 onChange : input, textarea, select 요소의 값이 변경될 때마다 발생하는 event handler

// 즉시 실행을 원할 경우
<button onclick={activeEvent()}>Event Button</button>
// click event만 주고 싶은 경우
<button onclick={activeEvent}>Event Button</button>

Synthetic Event

• 합성 이벤트
• 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 wrapper 객체

클래스형 컴포넌트 이벤트

• this를 사용해야 함수를 찾아갈 수 있음

<button onclick={this.printConsole}>Print Console</button>

// 생성자에서 바인딩을 해야 함수에서 this 사용 가능
constructor(props){
  super(props);
  
  this.printConsole = this.printConsole.bind(this);
}

printConsole() {
  console.log(this)
}

전개 연산자로 깊은 복사하기

var prevState = {
  name: "yuddomack",
  birth: "1996-11-01",
  age: 22
};
var state = {
  ...prevState,
  age: 23
};
console.log(state); // { name: 'yuddomack', birth: '1996-11-01', age: 23 }

• 기존 객체를 복사함과 동시에 age에 새로운 값을 할당
• 리액트의 props나 state처럼 이전 정보를 이용하는 경우, 유용하게 사용 가능
  JavaScript 비구조화 할당

state

• 리액트에서 앱의 유동적인 데이터를 다루기 위한 개체
• 계속해서 변하는 특정 상태
• 상태에 따라 다른 동작을 함
• 변수와는 달리 state가 변경될 시, 자동으로 재렌더링
• 이전까지는 state 때문에 클래스형 컴포넌트 사용 → 새로운 개념이 나오면서 함수형 컴포넌트 사용하기 시작
• setState 메서드를 사용하여 상태를 변경
• 화살표 함수를 이용할 때에는 생성자 호출이나 바인딩 과정 없이 state만 정의한 상태에서 state 변화 가능
• setState는 호출 직후에 상태 바로 업데이트 ❌ (= 비동기적으로 동작)
• 리액트는 비효율적으로 여러 번 재렌더링 되는 것을 방지하기 위해 여러 setState 호출을 일괄 처리

state vs props

• props : 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달할 때 사용
  • 리액트는 단방향 데이터 흐름
• state : 특정 컴포넌트가 갖는 상태 (값)
  • 컴포넌트 내부에서 선언되고 내부에서 값을 변경