[리액트를 다루는 기술] 컴포넌트

컴포넌트의 종류와 특징     

class형 컴포넌트 

시작하면서 나오는 내용이라서 기억하는거지 요새 잘 안쓰인다고 한다 (Hook 기능이 추가되고 나서) 그래서 읽을 수 있을 정도의 능력만 갖추면 될듯..

클래스 형태를 띄고 있어서 누가봐도 클래스형으로 보임

render()함수가 꼭 필요함 꼭 선언해주어야함(retrun 값이 이 함수 안에 들어가야한다)

state 설정 시에 2가지 방법이 있는데 생성자를 선언해서 super와 this를 써서 초기화 해주는 방식과 그냥 state 객체를 만들어 주는 방법 2가지가 있다

 

---

함수형 컴포넌트

클래스형 컴포넌트보다 이점이 많은데 그중 하나가 메모리를 덜 사용하고 크기가 작다는 것(크게 중요 x)

Hook을 활용해서 라이프사이클 기능과 Component 기능 임의 메서드 생성 등 클래스형 컴포넌트의 특징을 다 메꾸고도 남음

화살표 함수를 사용했을 때와 일반 함수를 사용했을 때의 특징만 좀 알고 있자(화살표함수는 this binding을 하지 않아 this 가 가르키는 것이 인스턴스(맨위)를 가르킨다)

---

props와 state

props 

컴포넌트의 속성을 설정할 때 사용하는 요소로써 부모컴포넌트에서 설정 할 수 있다 (대표적으로 App.js에서 설정하는 것 모양은 교재 참고)

childen 개념의 속성을 가지고 부모컴포넌트에서 선언 한 것을 자식컴포넌트에서 끌어서 사용 할 수 도 있다.(보통 App 에서 tag 안에 넣는 것들 <Documnet>자식이란다<Documnet/> 하면 Doc 에서 props.children 으로 사용)

const {name, number} = props;         // 비구조 할당문법

부모 컴포넌트에서 props를 선언을 안했을 때 자식에서 defualt 값이랑 기타 등등 선언 할 수 있는게 있다.(교재참고)

---

state

컴포넌트 내부에서 바뀔 수 있는 값

주의사항

• 값을 바꿀 때에는 세터함수를 이용하거나 사본을 만들어서 사본을 변경해서 state에 넣는 방식을 이용하자
• push, 할당 이렇게는 안되고 spread함수와 concat(), map(), filter() 는 가능