[React.JS] 리액트Hooks. useState 정의 및 활용 (4)

useState ? 

--> 컴포넌트에 보여줘야 할 내용이 Client의 상호작용에 따라 다르게 보여줘야 하는경우 

     즉, 특정한 상태 값을 관리해야될 경우 useState를 활용한다.

 

* useState(); 리턴구조 --> [배열구조]

useState("초기 값");  

--> 배열 return [ "값할당 변수", "값 Setter"]

 

---

1. Counter.js 컴포넌트 선언 

// 비구조할당 사용

[ 값, 값변경Setter ] = useState('초기값');    

 

// 동일표현(비구조할당X)

const result = useState(0);       // useState 함수호출.. (리턴값 배열) 

const number = result[0];        // 첫번째 배열요소:  값 할당 변수 

const setNumber = result[1];    // 두번째 배열요소:  값 Setter

 

 

2. App.js 수정

 

부모 컴포넌트 App.js 에서 Counter.js 렌더링

 

-- 렌더링 구조

index.js

[

    ReactDOM.render( App.js )

    [

        Counter.js

    ]

]

---

 

3. UserInput.js 컴포넌트 선언 

Client로 부터 키보드로 입력받는 input태그를 관리하는 UserInput 컴포넌트를 생성하였다. 

해당 Input태그를 useState와 상태 값 연결 함으로써 클라이언트의 행위에 따라, 동적으로 관리된다.

 

* onChange 이벤트 요소로 인자값 (e: 이벤트객체) 

e: 이벤트객체

e.target : 이벤트 발생 돔(DOM)

e.target.value: 이벤트 발생 돔의 값 

 

 

 

4. App.js수정 (UserInput.js 렌더링)

부모 컴포넌트 App.js 에서 UserInput.js 렌더링

 

-- 렌더링 구조

index.js

[

    ReactDOM.render( App.js )

    [

        UserInput.js

    ]

]