Hooks

• Hook이란?
  • Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수.
  • Hook은 class 안에서는 동작하지않음.
  • class 없이도 React를 사용할 수 있게 해줌.
  • React는 useState 같은 내장Hook을 제공함.
• Hook사용 규칙
  1. 최상위에서만 Hook을 호출해야함.
  2. React 함수 컴포넌트에서만 Hook을 호출해야함.

State

• State란?
  • 단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값이다.
  • 화면에 보여줄 컴포넌트의 UI 정보(상태)
• State를 정의하기 및 사용하기

  1. useState 함수를 import한 후 사용해야함. (react에서 가져옴)

  2. 선언문과 리턴 사이에 useState를 작성함

  3. 그 함수에서는 초기값을 인자로 넣어 호출하면 배열을 반환해줌.

  4. 배열의 첫번째 요소는 상태값이 저장되는 변수이고,
     두번째 요소는 상태값을 갱신하는 함수이다.

     import React, { useState } from 'react';
     // 1번 - import해서 사용해야함
     
     function State() {
     	const [ color(변수명), setColor(초기값을 바꿔주는함수명)] = 
     		// 4번 - 첫번째 값에는 상태값, 두번째는 갱신하는 함수
     		useState('red'(초기값)); //3번 - 초기값을 넣어 호출함
     	// 2번 - 선언문과 리턴 사이에 들어감
     	
     	return (
     		<div>
     			<h1 color={{ color: color }}>안뇽~~~~~</h1>
     		</div>
     	)
     }
     
     // h1에 글자색으로 color state를 호출하였고 따로 값을 주지않았으므로,
     // 안뇽의 글자색은 초기값인 빨간색으로 나오게된다.

• Event를 이용하여 State 변경하기 위에 정의하기에 setColor(초기값을 바꿔주는 함수명)을 사용하여 글자의 색을 바꿔줄것이다.

  import React, { useState } from 'react';
  
  function State() {
  	const [ color(변수명), setColor(초기값을 바꿔주는함수명)] = 
  		useState('red'(초기값)); 
  
  	return (
  		<div>
  			<h1 color={{ color: color }}>안뇽~~~~~</h1>
  			<button onClick={() => setColor('green')}>
  				글자색 바꾸기
  			</button>
  		</div>
  	)
  }
  
  // 버튼 클릭시 state의 값을 green 으로 바꿔줌

Props

• Props란?
  • 단어 뜻 그래도 컴포넌트의 속성값이다.
  • 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체.
• Props 객체 정의하기
  • 부모 컴포넌트

    1. State정의하기와 마찬가지로 react로부터 리액트,useState를 가져옴.

    2. 자식 컴포넌트를 가져오기위해 자식 컴포넌트위치에서 자식컴포넌트를 가져옴.

    3. 부모의 State를 자식컴포넌트에게 전달하기.

    4. 자식컴포넌트에 props 생성해주기 (밑에서는 textColor)

    5. props 값에 state값 할당해주기.

       // Parent.js
       
       //1번
       import React,{ useState } from 'react';
       //2번
       import Child(자식컴포넌트) from '자식컴포넌트의 위치';
       
       function Parent(부모컴포넌트) {
       	const [color, setColor] = useState('red');
       	// 3번 - 위에서 배운 State를 자식요소에게 전달할예정
       	return (
       		<div>
       			<h1>안뇽~~~~~</h1>
       			<Child textColor={color} />
       				//textColor = props
       		</div>
       	)
       }

  • 자식 컴포넌트

    1. 리액트로부터 리액트를 가져옴

    2. 자식컴포넌트에 인자로 props 넣어주기

    3. props의 값은 항상 객체로 나옴

    4. 그렇기 때문에 부모컴포넌트에 부여한 props값을 넣어줘야 원하는값을 넣을수있다.

       // Child.js
       
       //1번
       import React from 'react';
       //2번
       function Child(props) {
       //3번
       	console.log(props) // textColor: 'red';
       
       	return (
       		<div>
       			//4번 props의 값은 객체이므로 키값을 넣어줘야 출력이됨!
       			<h1 style={{color : props.textColor}}>
       				Child Component
       			</h1>
       		</div>
       	)
       }

• Props를 통한 이벤트핸들러 전달 자식 컴포넌트에 props에 State에서 정의한 두가지를 줄수있다.
  • 부모 컴포넌트 텍스트 컬러 말고 색을 바꿔주는 함수도 props에 전달해주겠음.

    import React, { useState } from 'react';
    import Child from '../pages/Child/Child';
    
    function Parent() {
      const [color, setColor] = useState('red');
    
      return (
        <div>
          <h1>Parent Component</h1>
          <Child textColor={color} 
    			// changeColor도 전달해줌
    			changeColor={() => setColor('blue')} />
        </div>
      );
    
    export default Parent;

  • 자식 컴포넌트

    1. props 값에 changeColor 도 들어감.

    2. onClick 할시 setColor 함수 실행

       import React from 'react';
       
       function Child(props) {
       	console.log(props) // {textColor : red , 
       		// changeColor : () => setColor('blue')}
         return (
           <div>
             <h1 style={{color : props.textColor}}>
       				Child Component
       			</h1>
             <button onClick={props.changeColor}>
       				//버튼 클릭시 color가 setColor로 인해 파란색으로 수정됨
       				Click
       			</button>
           </div>
         );
       }
       
       export default Child;