코딩애플_props, 부모의 states 가져다 쓰기
적용 code
import React, {useState} from 'react';
import './App.css';
function App() {
let [title, titleFunction] = useState(['React','HTML','CSS']);
let [count, countFuction] = useState(0);
let [modal, stmodalFunction] = useState(false);
// function titleChangeFunction(){
// let changedtitle = title.slice(); //[...title] 도 가능, deep copy 가 된다.
// changedtitle[0] = 'React - 1';
// titleFunction(changedtitle);
// }
return (
<div className="App">
<div className="black-nav">
<div>개발 블로그</div>
</div>
<div className='list'>글제목
<h3>{title[0]} <span onClick = {()=>{countFuction(count+1)}}> 😁 </span> {count} </h3>
{/* <button onClick={titleChangeFunction}>Title Change</button> */}
<p>2월 17일 발행</p>
<hr/>
</div>
<div className='list'>글제목
<h3>{title[1]}</h3>
<p>2월 17일 발행</p>
<hr/>
</div>
<div className='list'>글제목
<h3 onClick= { () => {stmodalFunction(!modal) } }> {title[2]} </h3>
<p>2월 17일 발행</p>
<hr/>
</div>
{
title.map(function(index){
return(<div className='list'>글제목
<h3>{index}</h3>
<p>2월 17일 발행</p>
<hr/>
</div>
)
})
}
{
modal === true
? <Modal title = {title} />
: null
}
</div>
);
}
function Modal(props){
return (
<div className="modal">
<h2>{props.title[2]}</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
export default App;
풀이
function App() {
let [title, titleFunction] = useState(['React','HTML','CSS']);
}
return (
{
modal === true
? <Modal title = {title} /> // 작명 = {전송할데이터}
: null
}
)
function Modal(props){
// 전송받는 곳에 'props' 라고 하면서 data를 받는다.
return (
<div className="modal">
<h2>{props.title[2]}</h2>
// 전송받은 데이터 props 의 작명 을 넣어준다.
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
Author And Source
이 문제에 관하여(코딩애플_props, 부모의 states 가져다 쓰기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bleach7/코딩애플props-부모의-states-가져다-쓰기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)