JSX문법에서 리액트 컴포넌트에서 요소 여러개를 하나의 요소로 감싸주는 이유는, DOM 트리 구조로 이루어져야 한다는 규칙때문.
클래스형 컴포넌트와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state, 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것.
화살표 함수를 사용하는 이유가 뭘까 ? 화살표 함수는 자신이 종속된 인스턴스를 가리킨다. 이 부분은 과거에 공부했던 프로토타입과 생성자 함수를 좀 더 보고 다시 작성할 것.
props는 properties를 줄인 말이고, 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
비구조화 할당이란, 객체에서 값을 추출하는 문법. 함수의 파라미터의 부분에서도 사용할 수 있다.
const {name, children} = props;
state : 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용 되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. 동적 UI 상태값
props를 바꾸려면 부모 컴포넌트에서 바꾸어주어야 한다. 그래서 콘솔에 오류가 났던부분. props와 state를 생각해볼 것.
props는 부모 컴포넌트가 설정하고,
state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트 할 수 있습니다.
props 부모의 요소를 자식 컴포넌트에게 전달할때 필요한 것. 객체이다.
같은 child 컴포넌트들은 props 값을 줄수 없어서, 부모 컴포넌트에서 state값을 정리해야 한다.
또한 state는 직접 바꾸면 안되고, state 값을 바꿀때는 setState를 통해 전달받은 setter 함수를 사용해야 한다.
props를 사용한다고 해서 값이 무조건 고정적이지 않다. 부모 컴포넌트의 state를 자식 컴포넌트의 props로 전달하고, 자식 컴포넌트에서 특정 이벤트가 발생할 때 부모 컴포넌트의 메서드를 호출하면 props도 유동적으로 사용할 수 있다.
