[react/공부] useState로 컴포넌트 상속 알아보기

useState로 부모 자식 컴포넌트 상속 알아보기

 

 

---

우선 html을 보면 자식 부모 요소들이 있다.

그와 마찬가지로 컴포넌트도 부모 자식, 형제 관계들이 있는데

파일을 따로 만들어 관리하고 (리액트 장점, 유지 보수가 용이)

그 파일들을 부모 자식 간 연결을 시켜주면 된다.

(형제끼리 연결하고 싶다면, 부모에게 거쳐서 다른 형제로 이동)

 

 

---

       예시 

먼저

Mom이라는 부모 컴포넌트와

Child라는 자식 컴포넌트,
Sister라는 형제 컴포넌트가 있다고 가정해보자.

** 컴포넌트를 쓸 때는 항상 첫 글자가 대문자다. 파일명도 마찬가지

 

Mom.jsx

function Mom() {
	const sendToChild = 'from mom, to child'
    
    //html
    return (
    	<>
        <Child/> //자식 컴포넌트
        <Sister/> //형제 컴포넌트
        </>
    ) 
}

앞서 말했듯, html처럼 부모자식 관계이기 때문에 부모가 자기 html에 자식을 컴포넌트로 품고있음

여기서 sentToChild를 자식에게 보내기 위해선

** 자식 컴포넌트 부분

<Child sendToChild={sendToChild}/>

이때 앞에 적힌 sendToChild는 변수명으로, 바꿔도 무관하다. (<Child 변수명={sendToChild}/>)

이렇게 보내준다.

이때 자식이 이 요소를 상속 받아 사용하기 위해선

아래는 자식 컴포넌트 파일

 

Child.jsx

function Child({ sendToChild }) {
	return (
    	<div>
        	{sendToChild}
        </div>
    )
}

이런식으로 받은 변수명을 괄호안에 넣어 사용한다.

자식이 부모에게 무언갈 보낼 땐 state라는 걸 사용하게 되는데 다음 챕터에서 설명하겠다.

 

 

 

       state 활용하기 

state?

state란 리액트의 장점 중 '상태변화'에서 상태를 변화시키기 위한 도구다.

useState라는 걸 react에서 import해서 사용하면 된다.

파일 상단에 아래 코드를 입력하면 됨

import { useState } from 'react';

이제 사용할 준비는 완료다. useState의 기본 형태는 아래와 같다.

const [value, setValue] = useState('initial value')

여기서 useState 외의 것들은 다 변수인데,

• value : 값 (변화를 적용할 곳에 배치하여 사용)

• setValue : 변화할 값을 적는 함수 'setValue(변화할 값)' 의 형태로 사용한다.

• initial value : 초기값, 변화할 값이 없을 때 보여줄 값이다.

 

 

예시

** 이걸 어디에 사용해야 하냐,

우선 setValue은 상속을 통해 input과 같은 사용자와 상호작용하여 값을 받을 곳으로 보내줘야 한다.

그리고 value는 그 값을 받아 변화될 상태를 렌더링할 곳으로 보내주어야 한다.

그래서! 그게 갈라지는 가장 아래의 부모 컴포넌트에 useState를 사용해주면 된다.

예를들어

• 할머니

• 엄마

• 나

• 오빠

• 조카

컴포넌트가 있다고 가정해보자.

값을 받을 input은 조카에게 있고, 그걸 렌더링 할 부분은 나다.

그러면 최상위 부모가 아닌 엄마에서 나눠져도 되는 거다.

플로우를 설명해보자면

엄마가 value / setValue 생성

• value : 나 에게 전달 '<Me value={value}/>' 형태

• setValue : 오빠 > 조카에게 전달 '<Brother setValue={setValue}/>' 형태로 전달, 조카도 마찬가지로 오빠가 조카에게 전달

** setValue로 변한 값은 굳이 value나 부모에게 전달해주지 않아도 실시간으로 value에 적용된다.

 

Mom.jsx

//아래 써주기 위해서는 무조건 import를 통해 자식 컴포넌트를 수입해와야 함. 다음 챕터에서 설명

function Mom() {
	const [value, setValue] = useState('초기값') //초기값 주목

	return (
    	<Me value={value}/>
        <Brother setValue={setValue}/>
    )
}

 

Brother.jsx

function Brother({ setValue }) {
	return (
    	<Nephew setValue={setValue}/>
    )
}

 

Naphew.jsx

function Nephew({ setValue }) {
	function clickHandler() {
    	setValue('value changed!') //'value changed'라는 문자열 주목
    }

	return (
    	<div>
        	<button onClick={clickHandler}></button>
        </div>
    )
}

 

Me.jsx

function Me({ value }) {
	return (
    	<div>
        	{value} //조카 컴포넌트에서 클릭하면 '초기값'에서 'value changed'로 변경
        </div>
    )
}