#1 Hook
**Hook** : 'hook'은 클래스 컴포넌트에서만 사용할 수 있었던 상태 관리와 라이프 사이
클 관리기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해 주는 함수, 이러한
hook들의 모음을 'hooks' 라고한다.Hook의 특징
1. 함수() 컴포넌트에서만 사용이 가능합니다.
2. hook의 이름은 반드시 'use'로 시작합니다.
3. 내장 hook이 존재합니다.('useState, useEffect, ...')
4. 직접 hook를 만드는 것도 가능합니다.('custom hook')사용 규칙
1. Hook은 함수() 컴포넌트 혹은 'custom hook' 안에서만 호출할 수 있습니다.
2. Hook은 함수() 컴포넌트 내의 최상위('at the top level') 에서만 호출해야 합니다.#2 State
**state** : 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값 해당 컴포넌트가 UI에 보여줄 정보를
결정할 때 사용할 수 있는 상태값을 의미한다.`state`는 컴포넌트 내에서 정의하고 사용
하며 얼마든지 변경할 수 있다. State 선언 방법
import { useState } from 'react'; // <- useState hook import
const Main = () => {
const [color, setColor] = useState("초기값"); // <-state 선언
return (
<>
<h1>여기는 메인페이지입니다.</h1>
</>
);
};
---------------------------------------------------------------------------------------
**State** : const [color, setColor] = useState("초기값");
!첫번째! 요소(color)는 우리가 동적으로 관리하고자 하는 상태값입니다.
해당 상태의 초기값은 'useState hook'을 호출할 때 인자 ('defaultValue') 로 넘겨줍니다.
!두번째! 요소(setColor) 는 첫 번째 요소인 상태값을 업데이트 하는 함수()입니다.
'state'를 초기값에서 다른 값으로 변경하고 싶다면 'setState'를 통해서 변경해 주면 됩니다.
!(첫 번째 요소와 두 번째 요소의 이름은 자유롭게 사용할 수 있습니다.)!
!(초기값의 형태는 '문자열'뿐만 아니라 모든 타입의 데이터가 들어갈 수 있습니다.)!
---------------------------------------------------------------------------------------
State 활용하기
import { useState } from 'react'; // <- useState hook import
const Main = () => {
const [color, setColor] = useState("초기값"); // <-state 선언
return (
<>
<h1 style={{ backgrundColor : color }}>여기는 메인페이지입니다.</h1>
</>
);
};
---------------------------------------------------------------------------------------
1. 먼저 h1태그에 인라인 스타일을 적용하겠습니다. (<h1 style={}>)
2. 여러 스타일 속성 중에 변경하고자 하는 것은 배경 색상이므로,
'backgrundColor' 를 적용합니다. (<h1 style={{ backgrundColor : "" }}>)
3. 만약 'backgroundColor'의 'value'로써 정적인 값이 들어가게 된다면, 배경 색상을 동적으로
활용할수 없게 됩니다. 그렇기 때문에 'backgroundColor : color' 와 같이 미리 선언한 'state'
값을 넣어줍니다.
4. 그렇다면 처음 화면이 렌더링될 때 'useState hook'의 초기값인'red'에 따라
h1 태그의 첫 배경색은 빨간색으로 그려지게 됩니다.
5. useState('blue')로 초기값을 변경하면 화면에 그려지는 배경색 또한 파란색으로 나타납니다.
---------------------------------------------------------------------------------------#3 State & Event
위의 예시에서 'state'의 초기값에 따라 다른 배경 색상이 적용되는 것을 확인할 수 있었습니다.
하지만 아직도 부족한 부분이 있습니다. 여전히 직접 state의 초기값을 수정해줘야 한다는 점입니다.
이런 경우 우리는 useState hook의 반환 값 중 두번째 요소였던 setColor을 통해 해결할수 있습니다.setState 활용하기
import React, { useState } from 'react';
const Main = () => {
const [color, setColor] = useState('red');
return (
<>
<h1 style={{ backgroundColor: color }}>여기는 메인페이지입니다.</h1>
<button onClick={() => setColor('blue')}>색상 바꾸기</button>
</>
);
};
---------------------------------------------------------------------------------------
1. 먼저 h1태그 하위에 button 태그를 추가했습니다.
2. 버튼에서 발생하는 이벤트는 클릭이므로 'onClick' 이벤트 핸들러를 넣어주고, 해당 이벤트가 발생할
때 마다 실행될 로직을 넣어줍니다,
3. 여기서 실행시키고자 하는 바는 'color' 값을 'blue'로 바꿔주는 것이므로 'setColor' 함수를 실행
시키고 인자로 바꾸고자 하는 값인 'blue'를 넘겨줍니다. 그러면 '색상 바꾸기' 라는 버튼을 클릭하면
hi의 배경 색상은 빨간색에서 파란색으로 바뀝니다.
---------------------------------------------------------------------------------------#4 Props
**Props** : props는 컴포넌트의 속성값을 의미하며,더 정확하게는 부모 컴포넌트로부터
전달받은 데이터를 지니고 있는 객체입니다.전달하고자하는 어떤 값이든 자식 컴포넌트에
전달이 가능합니다 (문자,숫자,변수,함수 등)props 사용하기
// Parent.js
import React from "react";
import Child from "./Child"; // <- 자식컴포넌트를 import
const Parent = () => {
const color = "red"; //부모 컴포넌트에서 변수를 선언
return (
<>
<h1>부모 페이지 입니다.</h1>
<p>{color}</p>
<Child colors={color} numbers={50} /> //colors라는 그릇에 color변수를 담아 자식요소에게 보냄
</>
);
};
export default Parent;
---------------------------------------------------------------------------------------
1. 먼저 Child 컴포넌트를 만들고 import를 합니다. 그리고 위와같이 <Child /> 컴포넌트를 return
문 내에 넣어줍니다, 그렇다면 여기서 우리가 집중해야 할 것은 어떤 데이터를 자식 컴포넌트로 보내
주어야 하는가 입니다.
2. 위 예시에서 부모 컴포너트에는 이미 선언되어 있고, 자식 컴포넌트에서도 필요로 하는 데이터는 과연
무엇일까요? 바로 'color'라는 변수입니다.
3. 보내주고자 하는 데이터가 파악되었다면 tag에 속성을 주입하듯 'colors={color}'과 같이 자식
컴포넌트에 속성 값을 추가해 줍니다. 여기서 'colors'는 자식 컴포넌트에서 데이터를 받을때 사용
되는 인식표 라고 생각하면 됩니다. 'red' 라는 데이터가 'color'이라는 그릇에 담겨있듯 부모 컴포
넌트에서 선언된 'color'라는 변수를 자식 컴포넌트에 넘겨줄때 'colors'라는 그릇에 담아 보내주는
겁니다.
4. 위 예시처럼 변수(colors)를 넘겨줄 수도 있고, 직접 값을 할당('tiger')해서 넘겨줄수도 있습니다.
또한 넘겨줄 수 있는 데이터 타입은 문자열 뿐 '아니라 모든 데이터 타입'을 넘겨줄 수 있습니다. 만약
넘겨주고자 하는 값이 둘 이상이라면 위 예시와 같이 넘겨주고자 하는 값 사이를 띄워줌으로써 구분을
해주고 원하는 만큼 추가하면 됩니다.
---------------------------------------------------------------------------------------자식컴포넌트에서 전달 받은 데이터 적용
import React from "react";
const Child = (props) => { //
console.log(props);
return (
<>
<h1>자녀페이지 입니다.</h1>
<p>{props.colors}</p>
<p>{props.numbers}</p>
</>
);
};
export default Child;
---------------------------------------------------------------------------------------
**지금까지의 예시를 정리해 보자면 자식 컴포넌트인 Child에서 재사용할 수 있는 데이터가 있기에, 부모
컴포넌트인 Parent는 colrs이라는 그릇에 변수 color을, numbers이라는 그릇에자열 50을 담아서 보내
줬습니다. 그렇다면 자식 컴포넌트에서는 어떻게 props를 활용하여 이 데이터를 받아올 수있는지 알아보
도록 하겠습니다.**
1.함수에서 인자를 받아서 사용하듯, 함수 컴포넌트 또한 const Child = (매개변수) ⇒ {} 와 같이 부모
컴포넌트에서 보내준 데이터를 받아서 사용할 수 있습니다. 여기서 부모 컴포넌트가 전달해 준 'props'는
하나의 '객체'로 합쳐져서 함수 컴포넌트에 전달됩니다. 함수와 마찬가지로 함수 컴포넌트의 매개변수의
이름을 마음대로 지을 수 있지만 부모 컴포넌트로부터 받은 'props'를 표현한다는 것을 명시적으로 나타
내기 위해 const Child = (props) ⇒ {}라고 매개변수 이름을 짓는 것이 컨벤션입니다.
2. props라는 이름으로 부모 컴포넌트가 전달해 준 값을 받기로 했다면, 이젠 사용하기만 하면 됩니다.
그전에 보다 정확한 사용을 위해 console.log(props)를 통해 실제로 값이 어떻게 넘어오는지 확인해
보겠습니다. 부모 컴포넌트에서는 'colors'이라는 그릇에 'red'를 'numbers'이라는 그릇에 50을
보내주었으니, console.log(props)의 결과는 {colors: 'red', numbers: 50} 가 될 것입니다.
3. 그렇다면 다음 단계는 무엇일까요? 바로, 객체로 받아온 값을 적용시키는 것입니다. 우리가 이미 알고
있는 객체의 접근 방법을 사용하여 보여주고자 하는 곳에 사용해 주면 됩니다.
'(props.color, props[”numbers”])'
---------------------------------------------------------------------------------------함수의 전달과 적용
import React from 'react';
import Child from './Child';
const Parent = () => {
const testConsole = () => {
console.log('테스트 입니다.');
};
return (
<>
<h1>부모 컴포넌트입니다.</h1>
<button onClick={testConsole}>클릭</button>
<Child test={testConsole} />
</>
);
};
export default Parent;
---------------------------------------------------------------------------------------
**props를 정의할 때, props로 모든 값을 보내줄 수 있다고 했습니다. 그렇다면 함수는 어떻게 보내고,
어떤 식으로 적용시킬 수 있는지 다음의 예제를 통해 알아보겠습니다.**
1.부모 컴포넌트에서는 'testConsole'이라는 함수()를 선언하고, 이 함수()가 버튼을 클릭할 때마다 실행
될 수 있도록 클릭 이벤트 핸들러에 걸어주었습니다. 그렇다면 우리는 매번 버튼을 클릭할 때마다 'testConsole'
함수 내에 있는 console.log(’테스트 입니다.’) 라는 문자열이 출력되는 것을 확인할 수 있습니다.
2. 그렇다면 해당 함수를 자식 컴포넌트에서도 사용해야 하는 상황이라면 어떻게 하면 될까요?
3.이전에 변수를 넘겨줄 때와 달라지는 점은 없습니다. 부모 컴포넌트에서는 전달하고자 하는 'testConsole'
이라는 함수()를 어떤 이름으로 넘겨줄지만 정해주면 됩니다.
---------------------------------------------------------------------------------------// Child.js (자식 컴포넌트)
import React from 'react';
const Child = (props) => {
console.log(props); // {test: () => {console.log('테스트 입니다.')}}
return (
<>
<h2>자식 컴포넌트입니다.</h2>
<button onClick={props.test}>클릭</button>
</>
);
};
export default Child;
---------------------------------------------------------------------------------------
1. 부모 컴포넌트에서는 전달하고자 하는 함수를 test라는 그릇에 담아 전달해 주었습니다.
2. 자식 컴포넌트에서 함수를 props로 받아오는 부분도 변수를 받는 예제와 동일합니다. 다만 받아온 값이
바뀌었으므로 console.log(props) 를 통해 확인하면 위와 같이 함수 자체가 넘어오는 것을 확인할 수
있습니다.
3. 확인만 할 수 있는 것이 아니라 변수를 적용했던 것처럼 부모 컴포넌트에서 선언된 함수이지만 자식
컴포넌트에서도 사용할 수 있습니다. 위 예시를 보면 button 태그에 클릭 이벤트 핸들러를 걸어주었고,
해당 태그를 클릭할 때 마다 실행되는 함수를 부모로부터 받은 test 함수로 정의해 줬습니다. 결국 실제
로 button 태그가 클릭될 때마다 실행되는 함수는 부모 컴포넌트에 있는 testConsole이라는 함수가 되
는 겁니다. 
안녕하세요!