[React] 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - velopert

React : 김민준(velopert)님의 인프런강의 ‘누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌’를 기반으로 기록해 놓고 싶은 내용들을 작성했습니다.

특별한 점

• 어마어마한 생태계
  • 2006년 jQuery 급으로 큰관심
• 사용하는곳이 많다.
  • Airbnb, BBC, FACEBOOK …
• 한번 사용하면 좋아하게 된다.

시작하기

• Webpack
  • 코드들을 의존 순서대로 하나 또는 여러개로 만들어냄
• Babel
  • javascript 변환 도구
• 개발 Starter 도구 : codesandbox

JSX

• React 컴포넌트 작성할 때 사용되는 문법
  • html과 비슷하지만 규칙이 있음 (참고 자료)

키워드 기록

• 함수형 컴포넌트
  • 함수만 존재하는 컴포넌트
• props
  • 부모 -> 자식, ReadOnly
• state
  • 컴포넌트 스스로가 값을 소유
  • setState()을 통해서만 값 변경 가능 (this. 로 접근 시 바인드 오류 발생)
• constructor
  • Component가 생성될때마다 수행되는 함수
• LifeCycle API
  • 참고 URL
  • 필요할 때마다 찾아서 사용하면 됨.

- 그림 출처

개발

단축키 (in VS Code)

Extension : Reactjs code snippets

• rcc + enter : React 기본 클래스 컴포넌트 템플릿 작성
• rsc + enter : React 기본 함수형 컴포넌트 템플릿 작성
• scu + enter : shouldComponentUpdate(nextProps, nextState)

Tips

• submit 새로고침 방지

  handleSubmit = (e) => {
    e.preventDefault();
  }
  

• props 에 key를 줘야 하는 이유
  • key가 없으면 Component 가 생성/삭제 될 때 전체적인 주소변화가 발생함.
  • ex) a, b, c, d -> a, b, z, c, d : z가 중간에 끼어들게 되면,
    • c -> z
    • d -> c
    • d 신규 추가
  • 와 같이 쓸모없이 많은 변환이 발생함.
• 불변성 유지를 위한 라이브러리 : Immutable.js, Immer.js

참고

• 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌