[0806] React-Native 강의 정리

Section 6 : State Management in React Components

Q. 실질적으로 변수의 값을 바꿀 자식 컴포넌트와, 변수 값을 읽고 띄워야 하는 부모 컴포넌트 중 어디에 state를 선언해야 하는가?

→ 일반적으로는 state 값을 읽거나 변경해야 하는 부모 컴포넌트에 생성함.

→ 자식 컴포넌트가 state를 읽어야 할 경우, 부모 컴포넌트에서 prop으로 자식 컴포넌트에 전달할 수 있음.

 

※ 변수 이름을 모두 대문자로 작성하는 경우

→ prop이 아니고 컴포넌트 내에서 configuration option처럼 기능할 변수애 대해 이와 같이 명명.

 

• 변수의 변화를 확인하기

1. set~ 함수 실행 시마다 검사하기. → 모든 콜백에 대해 검사 코드를 작성해야 해서 비효율적.

2. 검사용 함수를 새로 만들기.

 

※ 코드 작성 시 : if 문 등을 삼항 연산자를 사용하여 정리하면 보기 좋고 깔끔해짐.

---

Q. 서로 연관된 state들을 업데이트할 수 있는 또 다른 방법?

→ state들을 관리하는 Reducer 사용.

 

• Reducer
  : 객체의 변화를 관리하는 함수(function)
  → 매개변수 1 : 모든 state들을 갖고 있는 객체.
  → 매개변수 2 : 매개변수 1을 어떻게 업데이트할 것인지 묘사(describe)하는 객체

//ex)
{ num1: 0, num2: 0, num3: 0 }
{ numberToChange: 'num1', amount: 10 }

• Reducer 사용에 대한 중요 사항

1. 매개변수 1은 절대로 직접적으로 변경하지 않음.

2. 반드시 매개변수 1로 쓰일 값을 반환해야 함.

import React, { useReducer } from 'react';

//reducer 는 컴포넌트 밖에 만드는 걸 권장.
const reducer = (state, action) => {
	//action : 'state를 어떻게 변경할 것인지'를 가리키는 보편적인 단어
	//action === {numToChange, amount} 의 구성
	//switch 문을 많이 쓰는듯?
	switch(action.numToChange) {
		case 'num1':
			//절대로 원본을 바꾸지 않음.
			//대신 원본 객체를 복사하여, 그 객체를 변화시킴.
			return {...state, num1: state.num1 + action.amount};

		/* else code ... */

		default:
			return state; //무조건 state를 반환해야 함.
	}
};

const Screen = () => {
//state가 { num1: 0, num2: 0, num3: 0 } 객체를 가리키게 됨.
//dispatch : reducer를 실행하고 객체를 변화시킴(runMyReducer).
	const [state, dispatch] = useReducer(reducer, { num1: 0, num2: 0, num3: 0 });

};

//dispatch 실행
//dispatch에 action 객체를 전달해야 함.
dispatch({ numToChange: 'num1', amount: 1 })

 

→ action에는 아무 property나 다 넣을 수 있으나, 일반적으로 따르는 보편적 규칙이 있음.

1. type : 값을 변경하는 함수를 설명하는 문자열.

2. payload : 값을 변경하는 함수에 필요한 데이터.

//변경 전
{ numToChange: 'num1', amount: 1 }
//변경 후
{ type: 'change_num1', payload: 1 }

 

※ useReducer에서 2번째 매개변수에는 꼭 객체가 올 필요는 없음...

→ 다만, reducer를 쓴다는 것 자체가 다수의 변수를 관리한다는 의미이기 때문에 객체를 쓰는 경우가 많음.

 

 

• TextInput : 문자열 입력을 받는 primitive component
  → 그냥 사용하면 화면에 아무것도 안 보여서 스타일을 입혀주는 것이 좋음.
  
  
• TextInput의 props

1. autoCapitalize : iOS 등에서 자동으로 첫 글자를 대문자로 만드는 기능을 켜거나 끌 수 있는 Prop.

2. autoCorrect : 자동으로 오타를 고쳐주는 기능을 켜거나 끌 수 있는 Prop.

• State 로 TextInput 관리하기
  → 부모 컴포넌트가 자식 컴포넌트(TextInput)의 state를 확인하는 것은 X.
  ⇒ 부모 컴포넌트가 자식 컴포넌트(TextInput)의 현재 값을 state로서 갖고 있고, 자식에게 onChangeText와 value prop을 전달함으로써 Text 값을 띄움.

※ JSX구문 안에서 {}를 사용하면 Javascript 구문을 사용할 수 있음.

※ 아무 컴포넌트도 표시하고 싶지 않다면 null을 반환하면 됨.

//ex)
{true ? <Text>It's True</Text> : null}

 

---

참고

• Hook Function

https://ko.reactjs.org/docs/hooks-overview.html

Hook 개요 – React