React State & Props

• state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.
• React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.
• React 컴포넌트(React Component)에 props를 전달할 수 있다.
• 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다.
• 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다.
• 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다.
• React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다.
• JSX 문법의 기본과 컴포넌트 기반 개발에 대해서 숙지한다.
• React Router DOM으로 React에서 SPA(Single-Page Application)을 구현할 수 있다.
• state hook을 이용하여, 컴포넌트에서 데이터를 변화시킬 수 있다.
• props를 이용하여, 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달할 수 있다.
• 바람직한 컴포넌트 구조와 state와 props의 위치에 대해 고민한다.

🍙 Intro 

 

State(살면서 변할 수 있는 값 => 상태) 리액트 => 컴포넌트 사용 중 내부에서 변할 수 있는 값	Props(외부에서 전달받은 값 => 변하지 않음)
나이, 현재 사는곳, 결혼/연애 유무	이름,성별

 

UI컴포넌트	스위치	수량버튼
State	on/off 여부에 따라 달라진다	현재 숫자 값 +/- 버튼 클릭에 따라 달라진다
code	{isOn : true} {isOn : false}	{count:0} {count:5}

---

🍙 Props의 특징

- 컴포넌트의 속성(property)을 의미한다. 변하지 않는 외부로부터 전달 받은 값이다.

 

- 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값

 

- React 컴포넌트는 Javascript 함수와 클래스로, props를 함수의 전달인자(argument)로 전달받아

이를 기반으로 화면에 어떻게 표시되는 지를 기술하는 React 요소(element)를 반환한다.

=> 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다.

 

- 객체형태이다.

 

- 읽기 전용이다. 데이터를 전달받아 변하지 않는 값이므로 변경할 수 없다.

=> 읽기전용이 아니라면? Props를 전달받은 하위 컴포넌트 내에서 수정시 상위 컴포넌트의 값이 영향을 끼친다.

=> 이는 단반향, 하향식 데이터 흐름 원칙에 위배된다.

 

🍙 props 사용 방법

1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다.

2. props를 이용하여 정의된 값과 속성을 전달한다.

3. 전달받은 props를 렌더링 한다.

 

🍙 props.children

1.하위 컴포넌트태그 태그 사이에 value를 넣는다.

2. {props.children}을 이용한다.

---

🍙 state 사용법

1. React로부터 useState를 불러온다.

2. useState를 컴포넌트 안에서 호출해준다.

=> 'state'라는 변수를 선언하는것과 같다. 이름은 아무거나 다 됌.

=> state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.

3. useState를 호출하면 배열을 반환하는데

0번째 요소 : 현재 state 변수

1번째 요소: 이 변수를 갱신할 수 있는 함수

useState(인자로 넘겨주는 값) => state의 초깃값

4. state변수에 저장된 값을 사용하려면 JSX엘리먼트 안에 직접 불러 사용

state 갱신하기

5. state 변수를 갱신할 수 있는 함수 호출

 input[type=checkbox] 엘리먼트 값이 변경되면 onchange이벤트가 발생

 

 

🍙  state 사용시 주의점

React 컴포넌트는 state가 변경되면 새롭게 호출되고 리렌더링이 된다.

React state는 상태 변경 함수 호출로 변경해야 한다.

강제로 변경을 시도하면 리렌더링이 안되거나 state가 제대로 변경되지 않는다.

 

🍙과제로 보는 state

과제

트위터의 input값과 textarea 의 value를 화면에 더미데이터(배열)과 함께 구현되고 추가된 트윗은 제일 위에 보여야 한다.

 

문제 해결 과정

1. React로부터 useState를 불러온다.

2. useState를 컴포넌트 안에서 호출해준다.

유저의 이름을 넣을 값, 트윗내용을 넣을 값 , 화면에 랜더링할 더미데이터값을 변수에 할당해준다.

 

3.useState를 호출하면 배열을 반환 하는데

 

	화면에 랜더링할 더미데이터값	유저의 이름을 넣을 값	트윗내용을 넣을 값
0번째 요소 : 현재 state 변수	posts	name	msg
1번째 요소: 이 변수를 갱신할 수 있는 함수	setPosts	setUsername	setMsg
useState(인자로 넘겨주는 값) => state의 초깃값	dummyTweets(원래의 더미 데이터)	""(빈 문자열)	""(빈 문자열)

 

4. state변수에 저장된 값을 사용하려면 JSX엘리먼트 안에 직접 불러 사용

5. state 변수를 갱신할 수 있는 함수 호출

 

가장 헤맸던 부분

  <button>을 눌렀을때 만들어진 새 트윗을

원래 있던 더미데이터 배열에 추가해줘야한다.

 

새 트윗 안의 내용은

원래있던 더미데이터의 프로퍼티 양식을 따르고

map함수를 이용하기 때문에

id값을 꼭 주어야

렌더링할때 정상 출력이된다.

 

버튼이 클릭이 되고,

새 트윗이 만들어지며

 

변수로 만들어뒀던 데이터의 값이 변하므로

setPosts()가 실행이되고

 

새트윗은 배열의 첫번째 요소로 들어가게된다.

나머지 요소들은 스프레드문법으로 넣어준다.

---