Props 응용
구현하는 기능과 배우는 컨셉
✔ 제목버튼을 눌렀을때 각각 다른 모달창 제목나타내기
✔ 버튼말고<h3>
에 직접 사용해보기
각각 다른 모달창 제목 나타내기
function App (){
return (
<div>
...
<button onClick={()=>{누른제목변경(0)}}>버튼1</button>
<button onClick={()=>{누른제목변경(1)}}>버튼2</button>
<button onClick={()=>{누른제목변경(2)}}>버튼3</button>
<Modal 글제목={글제목} 누른제목={누른제목}/>
</div>
)
}
function Modal(props){
return (
<div className="modal">
<h2>제목 { props.글제목[누른제목] }</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
◾ 버튼 3개 만든다.
◾ 각각 버튼을 누르면 글제목이 수정되어야하므로 Modal라는 컴포넌트안에 제목부분을 props로설정
◾ 누른제목이 변수가 0이면 0번째 제목이 나타남
◾ 누른제목이 변수가 1이면 1번째 제목이 나타남
◾ Modal컴포넌트 안에 누른제목 props 설정
◾ 글제목[0] 글제목[1] 글제목[2]...
<h3>
글제목부분을 누르면 모달창 제목 변경시키기
◾ <h3>
에서 {누른제목변경(0)}을 하드코딩해야하는 문제가생긴다.
◾ 여기서 map의 파라미터를 이용한다. i파라미터는 0,1,2씩 반복문이 돌면서 1씩증가하는 정수를 뜻한다.
◾ 이걸 이용해서 누른제목변경(i)로 설정해준다.
결론
◾ state 하나만들고
◾ state가 요런 상태면 UI를 이렇게 보여주세요 라는 코드를 짠다.
◾ 그리고 버튼등 이벤트를 실행할땐 state를 이렇게 바꿔주세요. 라는것을 추가하면된다
◾ state는 UI의 현재상태를 보관하는 저장소 역할이라 생각하면 편하다.
Author And Source
이 문제에 관하여(Props 응용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mm0467/Props-응용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)