[React]State란?

1. React State

 

하나의 컴포넌트 안에서 전역 변수처럼 사용되는 변수로 컴포넌트의 상태를 관리함

 

Hook

함수형 컴포넌트에서 React에서 제공하는 기능을 사용할 수 있게 해주는 기능
(클래스형 컴포넌트는 자체적으로 생명주기 관리, 상태 변화 관리가 가능하지만
함수형은 불가능하기 때문에 Hook 이라는 별도 기능을 제공)
**대표적인 Hook 사용 기능으로 useState, useContext, useEffect. useReducer 등이 있음

 

useState

컴포넌트의 상태 값이 변하게 되면 컴포넌트를 다시 렌더링 (리랜더링) 시키는 함수
React 라이브러리에서 제공
import React, {useState} from ‘react’;

 

 

#예제 1

 

1. src/components/R06_State1.js 생성 후 작성

 

import React, { useState } from 'react';

const StateEx1 = () => {
// 변수 "test"를 선언
// 선연된 변수 "test"를 해당 컴포넌트의 State로 사용하고 초기값 'A'를 대입

// 1) test : 상태 변수 명을 test로 지정
// 2) setTest : 상태 변수 test를 변경하는 함수
// 3) userState('A') : 변수 test를 상태 변수로 사용할 것이고 초기값으로 'A'를 대입
// -> 상태 변수로 지정된 test가 setTest 함수에 의해 변하게 될 경우 컴포넌트를 리랜더링 함.
const [test, setTest] = useState('A');

// 상태 변수 test의 값이 'A'이면 'B', 'B' 이면 'A'로 변경하는 함수
// -> 해당 함수가 수행될 경우 상태(State)가 변하기 떄문에
// 컴포넌트가 리랜더링 되면서 출력된 화면에서 값이 변하게됨
const testFn = () => {
if(test === 'A') setTest('B');
else setTest('A');
}
return(
<>
<h1>{test}</h1>
{/* onClick : 버튼이 클릭되었을 때 */}
<button onClick={testFn}>Change!!</button>
</>
)
}
export default StateEx1;

 

2. src/App.js 작성

import './App.css';
import State1 from './components/R06_State1';
function App() {
return (
<>
<State1 />
</>
);
}
export default App;

 

<결과>

 

---

 

**State Lifting Up (상태 끌어 올리기)

하위 컴포넌트에서 발생한 이벤트를 이용해 상위 컴포넌트로 상태를 끌어 올릴 수 있음

 

#예제2

 

1. src/components/R08_State3.js 생성 후 작성

import React, {useState} from 'react';
/* 자식 컴포넌트 */
const Id = ({handler}) => {
// props로 전달 받은 값 중 key가 handler인 요소의 value(함수) 반환
return(
<>
<div className="wrapper">
<label htmlFor="id">ID : </label>
<input type="text" id="id" onChange={handler} />
</div>
</>
);
};

4_State 6

/* 자식 컴포넌트 */
const Pw = ({handler}) => {
// props로 전달 받은 값 중 key가 handler인 요소의 value(함수) 반환
return(
<>
<div className="wrapper">
<label htmlFor="pw">PW : </label>
<input type="password" id="pw" onChange={handler}/>
</div>
</>
);
};
/* 상태 끌어올리기 */
const StateLiftingUp = () => {
const [id, setId] = useState('');
const [pw, setPw] = useState('');

const idHandler = (e) => { // id값 변경 함수
setId(e.target.value);
}
const pwHandler = (e) => { // pw값 변경 함수
setPw(e.target.value);
}

console.log("id : " + id);
console.log("pw : " + pw);
return(
<>
{/* 자식 컴포넌트로 부모에서 만든 함수를 props를 이용해 전달 */}
<Id handler={idHandler}/>
<Pw handler={pwHandler}/>
<div className="wrapper">
<button disabled={ id.length === 0 || pw.length === 0 }>Login</button>
</div>
</>
);
}
export default StateLiftingUp;

 

2. src/App.js 작성

import './App.css';
import State3 from './components/R08_State3';
function App() {
return (
<>
<State3 />
</>
);
}
export default App;

<결과>