컴포넌트의 props는 properties의 줄임말로 어떠한 값을 컴포넌트에 전달해줘야 할 때 props를 사용한다.
Ex) App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name
이라는 값을 전달
App.js
import React from 'react';
import Hello from './Hello';
function App() {
return (
<Hello name="react" />
);
}
export default App;
Hello.js
import React from 'react';
function Hello(props) {
return <div>안녕하세요 {props.name}</div>
}
export default Hello;
Ex) Hello 컴포넌트에 또 다른 props, color
값을 전달
App.js
import React from 'react';
import Hello from './Hello';
function App() {
return (
<Hello name="react" color="red"/>
);
}
export default App;
Hello.js
import React from 'react';
function Hello(props) {
return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}
export default Hello;
props 내부 값을 조회 할 때 props.
을 입력하고 있다. props.
대신에 비구조화 할당(=구조 분해) 문법을 사용하면 코드가 더 간결해진다.
Hello.js
import React from 'react';
function Hello({ color, name }) {
return <div style={{ color }}>안녕하세요 {name}</div>
}
export default Hello;
컴포넌트의 파라미터에서 {}안에 받는 props를 미리 표기한다.
Hello.js
function Hello({name, age}) {
return <div>{name}</div>
}
Hello.defaultProps = {
name: '이름없음'
}
html
<button onclick="activateButton()">클릭하세요</button>
React
<button onClick={activateLasers}>
Activate Lasers
</button>
DOM 요소에만 이벤트 성정이 가능하다. div
, button
, input
등의 DOM 요소에는 이벤트 설정이 가능하지만, 리액트의 컴포넌트에는 불가능함
컴포넌트에 onClick을 달아도 이벤트가 실행되지 않고 props를 전달해주는 것에 불과하다.
react 16.8 버전부터 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태(state) 관리가 가능해졌다.
Hooks 중에 useState()를 이용하면 함수형 컴포넌트에서 상태 관리가 가능하다.
Counter.js
import { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
const countupHanlder = (e) => {
console.log("countuptHanlder");
setCount(count + 4);
console.log(count)
};
const countdounHanlder = (e) => {
console.log("countdountHanlder");
setCount(count - 1);
console.log(count)
};
return (
<>
<div onClick={countdounHanlder}>
<button onClick={countupHanlder}>Click</button>
</div>
<div>{count}</div>
</>
);
}
useState
useEffect도 Hooks 중 하나로, 컴포넌트가 렌더링 될 때 특정 작없을 실행할 수 있도록 한다.
useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다.
UserList.js
import React, { useEffect } from 'react';
function User({ user, onRemove, onToggle }) {
useEffect(() => {
console.log('컴포넌트가 화면에 나타남');
return () => {
console.log('컴포넌트가 화면에서 사라짐');
};
}, []);
return (
<div>
<b
style={{
cursor: 'pointer',
color: user.active ? 'green' : 'black'
}}
onClick={() => onToggle(user.id)}
>
{user.username}
</b>
<span>({user.email})</span>
<button onClick={() => onRemove(user.id)}>삭제</button>
</div>
);
}
function UserList({ users, onRemove, onToggle }) {
return (
<div>
{users.map(user => (
<User
user={user}
key={user.id}
onRemove={onRemove}
onToggle={onToggle}
/>
))}
</div>
);
}
export default UserList;
첫번째 파라미터 : 함수
두번째 파라미터 의존값이 들어있는 배열(deps
)
deps
배열을 비우게 되면 -> 컴포넌트가 마운트될 때만 useEffect에 등록한 함수 호출cleanup
함수라고 부른다.cleanup
함수가 호출된다.import React, { useEffect } from 'react';
function User({ user, onRemove, onToggle }) {
useEffect(() => {
console.log('user 값이 설정됨');
console.log(user);
return () => {
console.log('user 가 바뀌기 전..');
console.log(user);
};
}, [user]);
return (
<div>
<b
style={{
cursor: 'pointer',
color: user.active ? 'green' : 'black'
}}
onClick={() => onToggle(user.id)}
>
{user.username}
</b>
<span>({user.email})</span>
<button onClick={() => onRemove(user.id)}>삭제</button>
</div>
);
}
function UserList({ users, onRemove, onToggle }) {
return (
<div>
{users.map(user => (
<User
user={user}
key={user.id}
onRemove={onRemove}
onToggle={onToggle}
/>
))}
</div>
);
}
export default UserList;
deps
에 특정 값을 넣으면 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 된다
deps 파라미터를 생략하면 컴포넌트가 리렌더링 될 때마다 호출이 된다.
3회차 학습 키워드를 깔끔하게 정리해주셨네요! github 코드도 봤는데 깔끔하게 잘 작성해주셨어요. 미션 수행 잘 해주셔서 특별히 피드백 드릴 부분은 없는 것 같은데 피드백 필요하시거나 질문 있으시면 언제든지 주세요!!