Hook
Hook은 클래스 컴포넌트에서만 사용할 수 있었던 state(상태) 관리와 lifecycle(라이프 사이클) 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동(hook in)해주는 함수이며 Hook은 항상 함수 컴포넌트 내의 최상위(at the top level)에서만 호출해야 한다.
// useState Hook을 최상위에서 호출한 경우
// Test.js
import React, { useState } from 'react';
const Test = () => {
const [color, setColor] = useState('red');
if (5 > 3) {
console.log('true');
}
return <div>Hello!</div>;
};
export default Test;Props
props란 컴포넌트의 속성값을 의미하며, 더 정확히는 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체다.
// Parent.js(부모 컴포넌트)
import React from 'react';
import Child from './Child';
const Parent = () => {
const animal = '호랑이';
return (
<>
<h1>부모 컴포넌트입니다.</h1>
<p>{animal}</p>
<Child pet={animal} englishName="tiger" />
</>
);
};
export default Parent;보내주고자 하는 데이터가 파악되었다면 tag에 속성을 주입하듯 pet={animal}과 같이 자식 컴포넌트에 속성 값을 추가해 준다.
// Child.js(자식 컴포넌트)
import React from 'react';
const Child = (props) => {
console.log(props); // {pet: '호랑이', englishName: 'tiger'}
return (
<>
<h2>자식 컴포넌트입니다.</h2>
<p>{props.pet}</p> // 호랑이
<p>{props.englishName}</p> // tiger
</>
);
};
export default Child;함수에서 인자를 받아서 사용하듯, 함수 컴포넌트 또한 const Child = (매개변수) ⇒ {} 와 같이 부모 컴포넌트에서 보내준 데이터를 받아서 사용할 수 있다. 사용할때는 props를 붙여 사용하도록한다.
함수 전달과 적용
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;이전에 변수를 넘겨줄 때와 달라지는 점은 없다. 부모 컴포넌트에서는 전달하고자 하는 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;State
state는 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값이다.
// Main.js
import React, { useState } from 'react';
const Main = () => {
// 변수 color, setColor는 다름 이름으로 바뀔 수 있습니다.
const [color, setColor] = useState('red');
return <h1>여기는 메인페이지입니다.</h1>;
};
export default Main;state를 사용하기 위해 useState 함수를 import한 후에 사용해야 한다.
첫 번째 요소(state) 는 우리가 동적으로 관리하고자 하는 상태값이며 두 번째 요소(setState function) 는 첫 번째 요소인 상태값을 업데이트 하는 함수이다.
State 적용
// Main.js
import React, { useState } from 'react';
const Main = () => {
const [color, setColor] = useState('red'); // 4 ~ 5
return (
<h1 style={{ backgroundColor: color }}>여기는 메인페이지입니다.</h1> // 1 ~ 3
);
};
export default Main;- h1 태그에 인라인 스타일을 적용
- 여러 스타일 속성 중에 변경하고자 하는 것은 배경 색상이므로, backgroundColor를 적용한다.
- 만약 backgroundColor의 value로서 정적인 값이 들어가게 된다면, 배경 색상을 동적으로 활용할 수 없게 된다. 그렇기 때문에 backgroundColor : color와 같이 미리 선언한 state 값을 넣어준다.
- 그렇다면 처음 화면이 렌더링될 때 useState hook의 초기값인 “red”에 따라 h1 태그의 첫 배경색은 빨간색으로 그려지게 된다.
- useState(’blue’)로 초기값을 변경하면 화면에 그려지는 배경색 또한 파란색으로 나타난다.
State 함수 적용
// Main.js
import React, { useState } from 'react';
const Main = () => {
const [color, setColor] = useState('red');
return (
<>
<h1 style={{ backgroundColor: color }}>여기는 메인페이지입니다.</h1>
<button onClick={() => setColor('blue')}>색상 바꾸기</button>
</>
);
};
export default Main;여기서 실행시키고자 하는 바는 color 값을 “blue”로 바꿔주는 것이므로 setColor 함수를 실행시키고 인자로 바꾸고자 하는 값인 “blue”를 넘겨준다.
