20201011 TIL useState
React Functional Component
useState? (feat. accordion)
원래 state는 class Component에서만 사용 가능했지만, functional Component에서도 사용할 수 있는 방법이 있다. 바로 useState를 이용해서!
import React, { useState } from 'react';
const Accordion = ({ items }) => {
const [activeIndex, seetActiveIndex] = useState(null);
const onTitleClick = (index) => {
seetActiveIndex(index);
}
const renderedItems = items.map((item, index) => {
const active = index === activeIndex ? 'active' : '';
return (
<React.Fragment key={item.title}>
<div
onClick={() => onTitleClick(index)}
className={`title ${active}`}>
<i className="dropdown icon"></i>
{item.title}
</div>
<div className={`content ${active}`}>
<p>{item.content}</p>
</div>
</React.Fragment>
)
});
return (
<div className="ui styled accordion">
{renderedItems}
</div>);
}
export default Accordion;
위 코드는 useState를 이용해 state를 설정할 수 있게 해주고,
activeIndex를 state명으로, setActiveIndex를 setState명으로 사용해 준 경우이다.
위 이미지를 보면 아주 이해가 잘 될 것이다! :D
useState를 쓰면 functional Component에서도 state를 사용할 수 있으니 아주 좋아보이지만.. 숨겨진 작은 단점이 있다. 바로 setState처럼 한 번에 여러개의 state를 변경할 수 없다는 점이다.
// classComponent
class App extends React.Component {
state={color:"red",content:"red color"};
handleButton = () => {
this.setState({color:"green",content:"green"});
}
render(){
return (
<div>
<h1 style={{color: this.state.color}}}>{this.state.content}</h1>
<button onClick={this.handleButton}>Change Color</button>
</div>
}
};
// functionaComponent
const App = () => {
const [color, setColor] = useState("red");
const [content, setContent] = useState("red color");
const buttonHandler = () => {
setColor("green");
setContent("green color");
}
return (
<div>
<h1 style={{ color: color }}>{content}</h1>
<button onClick={() => buttonHandler()}>Change Color</button>
</div>
)
}
useState와 비슷하게 useEffect, useRef 등이 있는데 이 친구들을 통틀어 리액트의 Hooks라고 이야기한다. :)
Author And Source
이 문제에 관하여(20201011 TIL useState), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sunnysideup0w0/20201011-TIL-useState저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)