React.js의 rendering

React의 index.js에서는 root라는 id를 가진 div가 있다.

root div는 public/index.html 내부에도 있는데

리엑트 컴포넌트가 DOM 내부에서 랜더링 될 때 랜더링의 결과물이 root의 내부에 랜더링된다.

ReactDom.render의 역할
ReactDom.render는 컴포넌트를 페이지에 랜더링 하는 역할을 하며
react-dom 모듈을 불러와 사용할 수 있다.
첫번째 파라미터에는 페이지에 랜더링 할 내용을 JSX형태로 작성하고
두번째파라미터에는 해당 JSX를 랜더링 할 document내부 요소를 설정한다.

리액트 컴포넌트에서 요소 여러개를 하나의 요소로 감싸 주는 이유 ?
Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리구조로 이루어져야 한다는 규칙이 있기 때문이다.

JSX 내부에서 자바스크립트 표현식을 쓸 수 있다.
자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸면 된다.
JSX 내부의 자바스크립트표현식에서는 if문을 사용할 수 없기에 삼항연산자를 사용한다.
특정조건이 만족할 때 내용을 보여주고, 만족하지 못하면 아무것도 표시되지 않을때에도 삼항연산자를 사용할 수 있으나 AND연산자를 사용해서 조건부 랜더링도 할 수 있다.(단축평가)
어떤 값이 undefined일 수도 있다면 OR(||)연산자를 사용하면
해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로
간단하게 오류를 방지할 수 있다.(?? 사용을 권장한다)

리액트에서는 16.8v 이후로 hooks가 도입되고 공식적으로 함수형을 지향하다보니 클래스나 생성자 함수가 잘 쓰이는가는 의문이 든다.
그래도 hooks 도입 이전에 작성된 리액트는 클래스형으로 작성되다 보니 레거시를 만져야되는 경우가 있어서 클래스에 대한 이해도는 어느정도 필요하다.
자바스크립트는 프로토타입 객체지향언어이다. 하지만 보통 클래스를 사용한다.
잘쓰이나 안쓰이나를 떠나서 생성자 함수(클래스), 프로토타입은 자바스크립트 근간을 이루는 코어 문법 중 하나다. 레거시가 클래스 문법으로 구성되있어서 클래스도 알아야한다고 하시는분들도 있을거고 입장이 다양하지만 저는 클래스문법은 능숙하지는 않더라도 this랑 라이프 싸이클쪽은 완벽히 다룰 줄 알아야 한다.

className
리액트 v 16 이상부터는 class를 className으로 변환시켜 주고 경고를 띄웁니다.

var키워드의 lexical scope는 함수 단위이다.(함수 레벨 스코프)
const,let 키워드는 scope단위가 블록 단위이다.(블록 레벨 스코프)

HTML과 다르게 JSX는 모든 tag를 닫아주어야 한다. tag 사이에 별도의 내용이 들어가지 않는 경우에는 열고 닫는 tag 하나로 작성할 수도 있다.
이러한 태그를 self-closing tag라고 부른다.

클래스형 컴포넌트. 역할은 함수 컴포넌트와 똑같다.
클래스형과 함수형의 차이점
클래스 컴포넌트의 경우 state기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것.

함수 컴포넌트의 장점 :
우선 클래스형 컴포넌트보다 선언하기가 훨씬 편하다.
메모리 자원도 클래스형 컴포넌트보다 덜 사용한다.
프로젝트를 완성하고 빌드 후 배포할 때도 함수형 컴포넌트를 사용하는 것이
결과물의 크기가 더 작습니다.(큰 차이는 아니다)

함수 컴포넌트의 단점 : state와 라이프사이클 API사용이 불가능하다.
이 단점은 16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었다.
완전히 클래스형 컴포넌트와 똑같이 사용할 수 있는 것은 아니지만,
조금 다른 방식으로 비슷한 작업을 할 수 있게 되었다.
공식매뉴얼에서는 컴포넌트를 새로 작성할 때 함수컴포넌트와 Hooks를 사용하도록 권장하고 있다. 하지만 그렇다고 해서 클래스형 컴포넌트가 사라지는 것은 아니므로 클래스형 컴포넌트의 기능은 꼭 알아 두어야한다.

ES6의 화살표 함수

주로 함수를 파라미터로 전달할 때 유용하다.
Arrow Function이 기존 function을 대체할 수 없는 이유는
1. 사용하는 용도가 다르기 때문이고
2. 무엇보다도 서로 가리키고 있는 this 값이 다르다.
function()을 사용한 생성자 함수에서의 this는 종속된 생성자를 가리키고
그 안에서 객체를 만든다면 종속된 객체를 가리키지만, Arrow Function을 사용하면 자신이 종속된 인스턴스를 가리킨다.

화살표 함수에서 중괄호 { } 를 생략하면, 연산한 값을 그대로 반환한다는 의미로 쓰인다. (return을 대체한다)

다만 함수컴포넌트를 선언할 때 function키워드를 Arrow function 으로 사용하는 것은 간결하기 때문에 사용하는 것이다.(취향차이)

부모 컴포넌트에서 사용할 때 열고 닫는 컴포넌트 사이의 내용을 담아주는 children. {props.children}을 통해 사용할 수 있다.

함수형에서의 state 생성은 constuctor 함수와 super를 통해 생성한다.

  constructor(props) {
    super(props);
    this.state = {
      number: 0,
    };
  }

Lifecycle hook
컴포넌트,이벤트의 생성, 업데이트, 소멸을 가리킨다.
생성 되기 전에 ~ 해줘
삭제 되고 나서 ~ 해줘

class로 만든 컴포넌트에 사용이 가능하다

class Detail2 extends React.Component{
componentDidMount(){
	//detail2가 마운트되고나서 할 함수
	}
componentWillUnmount(){
	//detail2가 사라지고 나서 작동할 함수
	}
}

함수형 컴포넌트에서는 useEffect로 사용한다.
컴포넌트가 mount되거나 update될 때 useEffect

useEffect - 대괄호 [ ] 입력으로 1번만 실행하게 할 수 있다.
대괄호 안에 state값, 함수를 넣는다면 의존성 배열안에 들어있는 요소가 변경될때에만 실행하게 한다.

컴포넌트가 사라질때에도 코드를 실행할 수 있다.

return function foo(){ //state }

1번만 실행되는 event는 return을 사용하여 제거해야 버그를 줄일 수 있다.