![]()
목표 위 사진에서 보이는 목록에서 제목을 클릭하면, 그와 관련된 정보를 띄우는 모달이 하단에 출력되도록 하겠다. 현재는 목록의 어떤 제목을 클릭해도 아래와 같이 첫번째 제목인 '나_Hi'만 출력되는상태이다. 코드 작성 순서 1. state 생성 let [indexNum,setIndexNum] =useState(0); 동적 UI 변동을 줘야하므로 state를 사용한다. 2. state 상태 함수를 이용하여 indexNum state 값 변경 { //a는 하나씩, i는 0부터 반복될때마다 1씩 증가하는 수 글제목.map(function(a,i){ return( {setModal(!modal); setIndexNum(i)}}>{a} { let copy=[...따봉] copy[i]=따봉[i]+1 따봉변경(cop..
![]()
목표 부모 컴포넌트가 자식 컴포넌트를 호출할 때, 자식 컴포넌트는 부모 컴포넌트에서 정의된 state 사용이 필요할 수 있다. 이 때 props 파라미터를 이용하여 부모 state를 가져와 보자. 부모->자식 state 전송 1. 자식 컴포넌트 호출 시, 호출 태그 내부에 전송할 state 작성 let [글제목,글제목변경] = useState(['나_Hi','다_안녕하세요','가_채로입니다']); { modal==true?:null } 위 코드는 부모 컴포넌트가 Modal이라는 컴포넌트를 호출하고 있는 것이다. 글제목이라는 state를 글제목이라는 이름으로 자식 컴포넌트에 전송하고 있다. 또한 color와 같이 state는 아니지만, 이와 같은 방식으로 자식 컴포넌트에 문자열이나 함수, 수등을 전송할 수..
