-
React 기초 - propsFramework & Library/React 2021. 9. 22. 18:29
props의 사용
const HomePage = () => { const [boards, setBoards] = useState([]); useEffect(() => { let data = [ { id: 1, title: '제목1', content: '내용1' }, { id: 2, title: '제목2', content: '내용3' }, { id: 3, title: '제목3', content: '내용4' }, ]; setBoards([...data]); }, []); return ( <div> <Header /> <Home boards={boards} setBoards={setBoards} /> <Footer /> </div> ); }; export default HomePage;
ㆍ 위 코드는 HomePage.js에서 Home.js로 boards 상태 변수와 setBoards 함수를 전달해주는 코드이다.
ㆍ <Home> 태그의 boards={boards}와 setBoards={setBoards}를 통해 props로 데이터를 전달한다.
const Home = (props) => { /* 구조분할 할당 */ const { boards, setBoards } = props; return ( <div> <h1>홈페이지 입니다.</h1> <button onClick={() => setBoards([])}>전체 삭제</button> {boards.map((item) => ( <h2> 제목 : {item.title}, 내용 : {item.content} </h2> ))} </div> ); }; export default Home;
ㆍ Home.js에서는 props를 매개변수로 받는다.
ㆍ const { boards, setBoards } = props의 형태로 props를 구조 분할 할당한다.
ㆍ 따라서 변수 boards에는 HomePage.js의 boards 상태 변수가, setBoards에는 HomePage.js의 setBoards 함수가 전달된다.
GitHub - qlsdud0604/react-basic: 리액트의 기초를 학습하는 공간
리액트의 기초를 학습하는 공간. Contribute to qlsdud0604/react-basic development by creating an account on GitHub.
github.com
728x90'Framework & Library > React' 카테고리의 다른 글
React 기초 - form 태그 (0) 2021.09.22 React 기초 - Router (0) 2021.09.22 React 기초 - useRef 함수 (0) 2021.09.22 React 기초 - useMemo 함수 (0) 2021.09.22 React 기초 - useEffect 함수 (0) 2021.09.22