생활코딩 react (18. 베이스 캠프)

# React-18. 베이스 캠프

1. 리뷰

 - 실행, 배포, 컴포넌트 작성

2. 개념정리 

- 인포그라피 를 이용한 이미지 개념확인

(그림 https://velog.io/@lllen/React-eig7ww7p)

 1. Props, State 차이점 

 * Props : 읽기전용 

 * State : setState이용하여 수정가능

 ** 읽기전용 propse

  - App에서 Article에 props로 _title 정보를 전달시 Article 컴포넌트에서 전달된 _title을 수정할 수 없다.

  > react에서 오류발생

: src\App.js - App에서 Article 컴포넌트 선언부에서 props로 _title 전달

<Article title={_title} desc={_desc}></Article>

: src\components\Article.js - render 응답요소를 구성하기 전 _title로 전달된 속성 변경

this.props.title = 'hi ';

* 오류발생
TypeError: Cannot assign to read only property 'title' of object '#<Object>'

 - 내부적인 필요 정보, 상테는 State 이용

2. 공통점 : render 함수를 호출함

(그림 https://github-wiki-see.page/m/hochan222/Everything-in-JavaScript/wiki/React-Basic)

Component : props(외부에서 컴포넌트를 사용 -제어 ), state(내부사용-구현자)

 - 컴포넌트는 props, state에 따라 특정 상태가 되며 실제브라우에 표현되는 HTML(DOM)에 영향을 준다. 

 

(그림 https://c17an.netlify.app/blog/React/redux-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/article/)

* 컴포넌트의 상태가 변하면 변경된 상태를 참조하는 컴포넌트가 다시 그려진다. 

 1. 상위 컴포넌트가 하위 컴포넌트 수정시 props 수정

 - Toc 글목록은 date(props)의 값을 전달하여 화면에 목록정보 표시

 2. 하위 컴포넌트가 상위 컴포넌트 수정시 event 이용

 - Toc 클릭 시 상위 컴포넌트(App)의 props(mode)를 전달하기 위해 이벤트 사용

  > App 에서 Toc 컴포넌트의 props에 값을 전달하여 변경 

* 리덕스 

 - 컴포넌트의 상태를 하나의 저장소인 STORE를 이용하여 체계적으로 상태를 관리한다.

 > STORE의 특정 상태가 변경되면, 관련된 컴포넌트에 적용될 수 있게 처리

 

(정리)

* props, state 차이점

* 상위 컴포넌트, 하위컴포넌트 간 데이터 전달 방식 (props, event)

 

(다음내용) - react 등록, 수정, 삭제