#3.React(Props, Input)
Props
#2.React에서 Component의 단점으로 function App(){}안에 지정된 State를 사용하고 싶을때 사용할 수 없고,이때는 Props라는 문법을 통해 State를 Component로 전달할 수 있다고 하는데 오늘 그 내용을 배우게 되었다. 나는 처음에 배웠었던 내용을 까먹고 그냥 Componet에 State를 사용하려면 중괄호 안에 넣으면 된다고 배웠으니까,
function App (){
let [글제목, 글제목변경] = useState(['신발 추천', '니트 추천', '맨투맨 추천']);
return (
<Modal></Modal>
)
}
function Modal(){
return (
<div className="modal">
<h2>{ 글제목[0] }</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
위 처럼 h2태그안에 {글제목[0]}을 넣었었다. 하지만 당연히 작동하지 않았고, 그 이유는 글제목이라는 State 변수는 다른 Component인 function App(){}안에 선언되어 있기 때문이었다. 이럴때는 Modal이 자식Component이고, App이 부모Component이기 때문에 Props라는 문법을 통해 부모가 가지고 있는 State를 자식에서 전송을 해줘야 사용할 수 있게 된다. 위 경우에서 Props를 사용하는 방법은
-
function App(){} (부모 Component) 안에 <Modal 글제목(자식컴포넌트에 전송할이름) = {글제목(사용할 state명)}>
-
function Modal() 소괄호 안에 파라미터(보통 props)를 만들고, 이 props는 모든 props데이터가 들어 있기 때문에 글제목을 쓰고 싶으면 {props.글제목[0]} 이런식으로 사용해야 된다.
function App (){
let [글제목, 글제목변경] = useState(['신발 추천', '니트 추천', '맨투맨 추천']);
return (
<Modal 글제목 ={글제목}></Modal>
)
}
function Modal(props){
return (
<div className="modal">
<h2>{ props.글제목[0] }</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
정리하면 이렇게 사용할 수 있다.
Props로 상세페이지 만들기
그러면 글제목 State에는 3개의 데이터가 있는데 그러면 버튼3개를 만들고, 1번 버튼을 누르면 글제목[0], 2번 버튼을 누르면 글제목[1], 3번 버튼을 누르면 글제목[2]의 Modal창이 나오려면 어떻게 해야될까. Modal Component안 props.글제목[여기]에서 여기를 변수로 지정하면 좋을텐데 이 안에 숫자 State를 넣으면 할 수 있다.
function App (){
let [글제목, 글제목변경] = useState(['신발 추천', '니트 추천', '맨투맨 추천']);
let [숫자, 숫자변경] = useState(0);
return (
<div>
<button onClick={()=> {숫자변경(0);}} >버튼1</button>
<button onClick={()=> {숫자변경(1);}} >버튼2</button>
<button onClick={()=> {숫자변경(2);}} >버튼3</button>
<Modal 글제목 ={글제목} 숫자={숫자}></Modal>
</div>
)
}
function Modal(props){
return (
<div className="modal">
<h2>{ props.글제목[props.숫자] }</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
이렇게 하면 버튼을 클릭할때마다 숫자변경() 소괄호안에 숫자로 State데이터를 변경할수 있게 되고, 원하는 n번째 데이터를 가지고 올 수 있게 된다. Map에서는 i라는 Parameter를 설정하고 숫자변경() State 소괄호 안에 넣으면 버튼과 비슷하게 활용할 수 있게 된다.
Input에 입력한 데이터를 변수에 저장하기
function App (){
let [입력값, 입력값변경] = useState('');
return (
<div>
<input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
</div>
)
}
function App (){
let [입력값, 입력값변경] = useState('');
return (
<div>
<input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
</div>
)
}
사용자가 Input에 입력한 데이터를 변수에 저장한 뒤 활용하려면, State를 이용할 수 있다. 위와 같이 State변경함수인 입력값변경()의 소괄호 안에 onChange 이벤트가 동작하는 HTML의 값인 (e.target.value)를 담아주게 되면 입력값 State에 입력한 데이터를 저장할 수 있게 된다.
Author And Source
이 문제에 관하여(#3.React(Props, Input)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seongjae/3.ReactProps-Input-Class저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)