React 공식 문서 정리 내용

이글은 https://ko.reactjs.org/ react 공식 문서를 참고하여 작성한 것
내용은 거의 겹치므로 더 자세한 내용을 보고 싶으면 위 링크로 확인 바람

JSX

• JSX는 표현식이다
  (컴파일 되고 난 후 JS 객체로 인식됨)
• HTML보다는 JS에 가깝다
  (따라서 HTML attribute 값을 쓰지 않고 camelcase를 이용해서 표헌)
• React element 생성법
  (React.createElement로 생성)

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

• 제일 중요한점 : React element와 DOM node와는 엄연히 다른 것!!
• React element를 dom에 넣는 법

const element = <h1>hello world</h1>;
ReactDOM.render(element, document.getElementById('root'));

• ReactDOM.render은 변경된 부분만 업데이트해서 보여줌
  (예시)

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));}

setInterval(tick, 1000);

이렇게 tick()이 호출될 때마다 h2태그의 content인 시간이 바꾸게 되는데
ReactDOM은 자식 element가 이전 element와 다른 점을 비교하고 새롭게 업데이트 된 부분만 업데이트함

컴포넌트

• 위에 언급된 react element가 있지만 사용자 직접 컴포넌트로 정의할 수 있음

• 아래 코드에서 나타나는 일

1. element를 파라미터로 ReactDOM.render 호출
2. props를 가지고 Welcome 컴포넌트 호출
3. Welcome 컴포넌트는 <h1>Hello, sara</h1> 엘리먼트를 반환
4. react dom이 위 엘리먼트와 똑같이 dom 반영해서 업데이트

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

• 컴포넌트 이름은 항상 대문자로 시작해야함

props

• props 이름은 맥락이랑 독립적으로 Component 관점에서 지어야 함
• 모든 react component는 props에 대해서 순수 함수로 동작해야함
  순수 함수란?: input을 바꾸려 하지 않고 같은 input에 대해서는 동일한 output이 나옴

state

• setstate는 비동기적으로 진행

이벤트 핸들러

• DOM에서 처리하는 것과 유사하지만 살짝 다름
• camelCase로 써야함 / 문자열이 아닌 함수로 전달

HTML :
<button onclick="activateLasers()">
  Activate Lasers
</button>

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

상속보다는 합성

https://ko.reactjs.org/docs/composition-vs-inheritance.html 참고