리액트 입문

• 기본적으로 JavaScript는 이벤트 핸들러가 DOM을 업데이트한다.

• 이로인해 생기는 문제는 관리하기가 복잡해진다는 단점이 생긴다.
  

• 리액트 개발팀의 새로운 발상

  • 새로운 DOM을 만들어서 계속 갈아 끼우는 방식으로 복잡함을 줄였다. 단 DOM을 계속해서 만들면 속도가 느려진다는 단점이 있음.
  • 하지만 가상 DOM을 만들어서 속도를 개선
    

• UI를 어떻게 보여줄지 집중!!

• 컴포넌트 -> UI 조각

• JSX

  • BABEL은 XML로 선언을 하면 JavaScript로 변환한다.
    
  • <div>태그는 꼭 닫혀야 한다!</div>
  • <Hello />
  • <> 두개 이상의 태그 </> 다른 태그 대신에 프래그먼트 태그로 감싸는 방법도 있다.
  • const name = 'test';는 return <div>JavaScript값 보여줄 때 {name}</div>이렇게 {name}으로 해서 값을 보여줄 수 있다.
  • const style = { background: 'gray' } 스타일을 선언할 때는 객체형태로 입력해야한다.
  • class를 작성할 때에는 꼭 className으로 작성해야한다.
  • 주석은 {/*주석*/} 형태로 작성

• props

  
  
  

  • {color,name}으로 props를 설정해서 값을 가지고 올 수 있다.
  • defaultProps를 사용해서 기본값을 설정할 수 있다.

  

  • {children}을 사용하여 Wrapper태그 안에 있는 값을 가지고 올 수 있다.