TIL_ React 공부

리액트 컴포넌트에서 요소 여러 개를 하나의 요소롤 꼭 감싸줘야하는 이유 ->
virtual don에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 dom 트리 구조로
이루어져 있어야한다. 

JSX 내부에서 JS 코드 사용하는 방법은  {}로 감싸주면 된다. 

클래스형 컴포넌트  VS 함수 컴포넌트
클래스형일 때, state기능 및 라이프 사이클 기능을 사용할 수 있고 임의 메서드를 정의할 수 있음
클래스형에는 render함수가 꼭 있어야하고 그 안에 jsx를 반환해야함

함수컴포넌트는 선언하기 비교적 쉬움. 메모리 자원도 더 낮음. 그렇다고 해서 성능과 파일 크기가 현저하게 달라지는 것은 아님
stats, life cycle api 사용 불가 -> hooks가 대신함

리액트 공식 매뉴얼에서는 컴포넌트를 작성할 때 함수 컴포넌트와 hooks를 사용하도록 권장하고 있음


화살표 함수 vs function 함수 선언 방식의 차이
화살표함수는 주로 함수를 파라미터로 전달할 때 사용
ex)
setTimeout (() => {
console.log('hello')
}, 10000)

화살표 함수는 자신이 종속된 인스턴스를 가리키고, 일반 함수는 자신이 종속된 객체를 this로 가리킴
function Black() {
this.name = "흰";
return {
name :"검",
bark: function() {
console.log(this.name + '멍멍')
}
}
}
const balk = new Black()
balk.bark();  -----> 검 멍멍

function White() {
this.name = "흰";
return {
name :"검",
bark: () => {
console.log(this.name + '멍멍')
}
}
}
const balk = new White()
balk.bark(); ---> 흰 멍멍


: 그렇지만 거의 비슷하기 때문에 취향에 따라 사용하면 된다. 


태그 사이의 내용을 보여주는 children
자식 컴포넌트 -> <Mycomponent>리액트</Mycomponent>
부모 컴포넌트 -> <div> {props.children} </div>
---> children의 부분에 '리액트'가 들어감