React 정리

• 리액트는 자바스크립트 라이브러리이다. 페이스북에서 ui 를 더 잘 만들기 위해서 만들어졌다.
• JSX (syntax extension for javascript)
  : JSX 는 자바스크립트의 확장 버전이다. JSX 는 자바스크립트 파일 내에 HTML 태그를 넣어주는 방법으로 작성한다. 이 과정에서 JSX 문법을 자바스크립트 문법으로 바꿔주는 컴파일 과정이 필요하다.
• JSX 요소는 1) 변수에 저장할 수도 있고 2) 함수의 인자로 넘길 수도 있다.
• JSX 의 속성
  : 태그에 속성을 주고 싶다면 반드시 쌍따옴표로 감싸준다.
  : class 를 줄 때는 className 을 사용한다.
  : 이외에도 JSX 문법은 HTML 문법과 다르므로 공식문서를 참고한다.
• JSX 에서는 self-closing tag 를 사용할 수 있다.
  : <div /> ===<div></div>
• JSX 주의해야 할 문법

1. 중첩된 요소를 만드려면 소괄호로 감싼다.
2. 항상 하나의 태그로 시작한다. (가장 처음 요소가 sibling 이면 안된다.)

• Rendering 이란
  • HTML 또는 React 요소가 눈에 보이도록 화면에 그려지는 것을 렌더링이라고 한다.
  • 리액트 요소를 DOM node 에 추가하고 화면에 표시하려면 ReactDOM.render 함수를 사용한다. 첫 번째 인자로 "렌더링하고 싶은 요소" 를 넘기고, 두 번째 인자로 "렌더링하고 싶은 위치" 를 넘긴다.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

• node modules 폴더는 무거워서 git 에 업로드하지 않는다. 팀 프로젝트를 할 때 package.json 에서 맞는 버전을 각각 설치한다.

• package.json: 프로젝트 폴더의 모든 정보를 텍스트로 가지고 있는 파일이다.

• dependency: 버전 넘버가 적혀 있다. npm 이 버전을 읽고 해당 버전을 설치한다.

• node modules: 버전을 설치할 때 필요한 패키지가 모여있다.

• script: 명령어가 모여있다.

• HOC 와 Link 의 차이?
  : HOC 는 추가로 어떤 액션이 있을 때 사용한다. 예를 들어 로그인 시에, 유효한 유저이면 로그인 후 페이지를 이동시키고 미가입 유저라면 가입 화면을 띄워줄 수 있다. 이 때는 HOC 를 사용해서 if 문을 함수에 넣어준다. Link 는 단순 페이지 이동을 할 때 사용한다.
  : 아이디/비밀번호 입력 시 5 글자 이상 입력 or @ 를 포함했는지 여부 등을 HOC 를 통해 확인하여 페이지 이동을 할 수 있다.