State and Context: A Key Function to Operate the React Application

요소는 상호작용의 결과를 출력해야 할 필요를 가집니다. 이를 위해 각 요소가 독립적으로 저장공간을 가져야 하는데 이를 상태(state)라고 합니다.

지역변수(local variable)	상태(state)
지역변수는 렌더링이 종료된 후에는 유지되지 않습니다. 렌더링 호출이 끝나면 모든 지역변수가 해제됩니다.	상태는 렌더링이 종료된 후에도 값을 유지합니다.
지역변수의 변화는 새로운 렌더링을 발생시키지 않습니다.	상태의 변화는 새로운 렌더링을 발생시킵니다.

생명 주기와 마운팅

리액트에서 상태는 prop과 유사하지만 지역적으로 동작합니다. 모든 상태는 해당 요소가 완전히 제어합니다. 이를 제어하는 과정을 컴포넌트 생명주기(component lifecycle)라고 합니다. 상태 값이 변경될 때마다 해당 요소는 다시 렌더링되며, 사용자는 이 특성을 활용하여 다양한 동작을 제어할 수 있습니다.

마운팅(mounting)은 컴포넌트가 DOM에 추가되어 작동하기 시작할 때의 생명주기 단계를 의미합니다. 마운팅은 다음 세 단계로 진행됩니다.

1. 초기화 단계에서는 컴포넌트 클래스가 인스턴스화됩니다. 이때 생성자가 호출되어 상태와 props가 초기화됩니다.

2. 다음으로 render() 메서드가 호출되어 리액트 요소를 반환합니다.

3. ComponentDidMount()는 컴포넌트가 DOM에 성공적으로 마운트된 후 호출되는 생명주기 메서드입니다.

useState

useState는 상태를 관리하기 위한 API로, 다음 두 가지 기능을 제공합니다.

• 상태변수(state variable)는 랜더 간에 유지되는 변수 그 자체이며 상태변수라 호칭 합니다.

• 상태 설정 함수(state setter function)는 변수의 값을 바꾸고 리액트가 해당 요소의 랜더링을 발화 합니다.

이러한 상태는 요소의 생명 주기에 따라 특정한 절차로 동작합니다.

1. 요소가 처음으로 렌더될 때, useState에 전달된 초깃값 0에 따라 index의 시작 값은 0이 됩니다. 이는 [0, setIndex]로 표현되며, 리액트는 해당 요소의 최신 상태를 0으로 인식합니다.

2. 상태를 바꿀 때, 사용자의 상호작용으로 setIndex가 호출되어 index의 값이 변경됩니다. (예: 1로 변경) 리액트는 이 변경을 감지하여 해당 요소의 리렌더링을 시작합니다.

3. 요소가 다시 렌더될 때, useState(0)이 다시 호출됩니다. 리액트는 index의 변경된 값을 기억하고 있으므로, useState(0)은 [1, setIndex]를 반환합니다.

useState()는 후크(hook)로 분류됩니다. 후크는 렌더링 시점에만 접근할 수 있는 특별한 함수입니다.

Define and Design Your Own State

상태 변수와 그 자료형은 사용자가 필요에 따라 자유롭게 정의할 수 있습니다. 아래 코드는 두 개의 상태를 선언하는 예시를 보여줍니다.

코드

// decalre states on functional component
export default function Foo(){
	const [index, setIndex] = useState(0);
	const [showMore, setShowMore] = useState(false);
	return <></>
}

// decalre states on class component
class Foo extends React.Component{
	constructor(props){
		super(props);
		this.state = {"data": null};// state is always an object
	}
	render(){// render() has to behave like a pure funcion, don't consider or make it as instance/class
		this.setState({"data": "not null"});// you can change its value using: this.setState(__new_value__)
	}
}

Understanding Context and How It differs to State

문맥(context)은 노드 트리 내에서 자료를 전달하기 위한 요소입니다. 이는 프롭스나 JSX와 다른 원리로 작동하며, 복잡한 노드 트리 구조에서도 쉽게 자료에 접근할 수 있게 해줍니다.

코드

const MyContext = React.createContext(defaultValue);

<MyContext.Provider value={someValue}>
	{contianValue}
</MyContext.Provider>

React.createContext()

문맥을 사용하려면 React.createContext() 함수를 호출해야 합니다. 이 함수는 다음 두 가지 핵심 요소와 관련이 있습니다.

• defaultValue는 문맥의 초기값입니다. 구체적인 초기값을 정하기 어려운 경우 null을 사용할 수 있습니다.

• Context는 createContext가 반환하는 객체입니다. 문맥 자체는 정보를 담고 있지 않으며, 다음과 같은 구성 요소를 가집니다:

  • Context.Provider는 요소들의 문맥값을 관리합니다. 모든 하위 요소들은 이 Provider 내부에서 해당 문맥값에 접근할 수 있습니다.

  • useContext(Context)는 문맥값의 변화를 감지하고 요소들이 이를 구독할 수 있게 합니다. 단, 코드의 가독성을 해치고 오류를 유발할 수 있어 권장되지 않습니다.

• SomeContext.Provider를 통해 문맥 값을 지정하고 useContext(SomeContext)를 통해 원하는 값을 얻습니다.

컨슈머 컴포넌트와 useContext

문맥 값에 접근하려는 컴포넌트는 consumer component를 사용하거나 useContext 후크를 사용합니다.

//Creating a Context and provides to the children
const ThemeContext = createContext(null);
export default function MyApp(){
	return(
		<ThemeContext.Provider value="dark">
			<Form/>
		</THemeContext.Provider>
	);
}

function Form(){
	return(<Panel/>);
}
function Panel(){
	const theme = useContext(ThemeContext);
	return(
		<div>
			{theme}
		</div>
	);
}