[REACT] #3

강지훈·2022년 9월 26일

map: 많은 div 들을 반복문으로 줄이고 싶은 충동이 들 때

지금 좋아요 버튼 누르면 모든 글의 좋아요 갯수가 동시에 증가
각각 개별적으로 좋아요 갯수를 기록하고 싶으면 어떻게 코드를 짜야?
똑같은 html이 반복적으로 출현하면
반복문을 이용해서 쉽게 똑같은 html을 생성할 수도 있습니다.

자바스크립트 map 함수 쓰는법

var array = [2,3,4];
array.map(function(){
console.log(1)
});

기능 1 array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줌

기능 2 콜백함수에 파라미터 아무렇게나 작명하면 그 파라미터는 어레이 안에 있던 모든
자료를 하나씩 출력해줍니다.
(그냥 소괄호안에 있는 함수를 콜백함수라고 합니다)

var 어레이 = [2,3,4];
var newArray = 어레이.map(function(a){
return a * 10
});
console.log(newArray)

// 2 , 3, 4

기능 3 return 오른쪽에 뭐 적으면 array로 담아줌니다.
그리고 map() 쓴 자리에 남겨줍니다

자바스크립트에선 다른 함수에 있는 변수를 마음대로 가져다쓸 수 없습니다.

근데 컴포넌트 2개가 부모/자식 관계인 경우엔 가능합니다.
부모 컴포넌트의 state를 자식 컴포넌트로 전송해줄 수 있습니다.
그럼 자식도 사용가능
전송시엔 props라는 문법을 사용합니다

props로 부모 -> 자식 state 전송하는 법

2개의 step을 따라주시면 됩니다

[예시]
글제목 이라는 부모 컴포넌트의 state를 자식 컴포넌트 에 전송

function App (){
let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
return (

<div>
  <Modal 글제목={글제목}></Modal>
</div>

)
}

function Modal(props){
return (

<div className="modal">
  <h4>{ props.글제목[0] }</h4>
  <p>날짜</p>
  <p>상세내용</p>
</div>

)
}

1.자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름}/>
2.자식컴포넌트 만드는 곳에 가서 props라는 파라미터 등록후 props.작명

never stop