머리에 넣자. React (2)

1. 이벤트 처리하기 

<button onClick={activateLasers}>  Activate Lasers
</button>

또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 합니다. 

-> event 받아서 

event.preventDefault()

 

2. map

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);console.log(doubled);

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>  <li>{number}</li>);

3. key

항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. Robin Pokorny’s가 작성한 글인 인덱스를 key로 사용할 경우 부정적인 영향에 대한 상세 설명을 참고하시길 바랍니다. 리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용합니다.

Index as a key is an anti-pattern

 

4. state 업데이트

1) 새로운 문법

this.setState({
  [name]: value});

2) 이전 문법

var partialState = {};
partialState[name] = value;this.setState(partialState);

 

공식 문서 읽기

폼 까지 읽음