React Class형 컴포넌트
목차
1. Class 형 컴포넌트 부모,자식 구조
2. 컴포넌트를 활용한 구조분리 댓글 구현 실습
1 . Class 형 컴포넌트 부모,자식 구조
컴포넌트란(Component) 는 프로그래밍에서 재사용이 가능한 모듈을 뜻합니다.
Class 형 컴포넌트는 Class 형태를 따라서 부모와 자식으로 구조를 나누어서 활용을하는데 props 를 사용합니다
props
부모 => 자식
데이터는 항상 부모 => 자식 방향으로만 전달됨
부모에서 자식으로 데이터를 넘겨준다는 뜻으로 부모 요소에서 자식Class 컴포넌트에게 인자로 데이터를 넘겨주기 위해 활용합니다. 이는 리엑트의 단방향성 구조 때문인데
부모에서 자식으로 최소한의 State 관리를 위한 것인데 부모 Class 컴포넌트에서 State를 선언하고 자식 컴포넌트는 해당 State를 변경할수 없으나 메서드나 부모의 State를 props로 넘겨받은후 조작이 가능합니다.
부모에서 메서드를 보내줘서 자식요소에서 값을 변경
부모 컴포넌트에서 changemessage 메서드를 만들어서 자식컴포넌트에게 넘겨줌.
changemessage
newMessage를 인자로 받은 함수 자식컴포넌트에서 인자값을통해 부모 state를 변경하는 메서드 한게의 컴포넌트에선 하나의 state만 관리 가능함으로 부모의 state 요소인 message의 변경(setState) 는 부모요소에서만 가능하다!
자식컴포넌트
부모에게 props 로 message와 changemessage메서드를 넘겨받은상태
인풋의 value 값에 현재의 변경상태를 기록할 inputValue 를 state 생성
onChange = 상태값이 변경되면 실행
handleChange () 에 setState 를 사용해 리액트의 가상돔이 현재 변화상태를 항상인지하게 만들어줌.
Changemessage
부모의 changemessage 메서드를 newMessage 의 변수에 담아서 넘겨받았기에
props. newMessage(넘겨줄 인자값) 으로 부모의 메서드에 접근이 가능하다.
2. 컴포넌트를 활용한 구조분리 댓글 구현 실습
부모 컴포넌트
부모 컴포넌트에서 기본 댓글과 작성하기위한 기초틀을 state로 지정합니다.
새로운 댓글을 만들어줄 create 메서드를 만들고 인자로 newComment 를 받습니다.
... 스프레드 연산자
스프레드 연산자를 사용하는 이유는 리엑트의 가상돔에 내가 변경된 사항을 제대로 인지시키기 위하여사용합니다.
이렇게 사용할경우 arr.push(4)는 배열을 직접 수정하는 방식이지만.
React는 이 경우 배열이 수정되었는지 알 수 없기 때문에, 변경된 부분을 추적하기 어렵고, UI가 제대로 갱신되지 않을 수 있습기 때문입니다.
입력폼 컴포넌트
부모에서 commet를 받고 newComment 를 state로 만들어서 부모에게서 받은 create 메서드와 comment를 사용해서 부모의 commet를 변경
댓글이 쌓일 리스트 컴포넌트
부모에게서 commet를 넘겨받았고 create 함수에서 댓글이 쓰일때마다 스프레드 연산자를 활용하여 새로운 댓글란을 생성함으로 map 함수를 통해 comment 안에 모든 배열을 순회하며 리스트를 그려줌
완성된 화면
