props

props의 사용

코드 스테이츠에서 배우면서 가장 애를 먹은 것을 꼽자면, 단언코 props의 사용이라고 할만큼 애를 많이 먹었다.

이번 HA를 하면서 배운점을 나름 잊지 않기 위해서 정리를 해보고자 한다. 

 

사실 props의 사용 자체는 react홈페이지에 나와있는 것처럼 어렵지 않다. 

위 처럼, 만들고 싶은 props를 전달하고 싶은 사용자정의 컴포넌트 태크의 속성으로 넣어주면 된다. 

(참고로 여기에서 props는 {text =  "I'm the eldest child"}의 객체라고 생각하면 된다.)

 

그리고 이렇게 만든 props는 객체의 형태를 띄게 된다.

(즉, key = text, value  = 'I'm the eldest child" 가 되는 것. 이는 사용에 있어 필요한 부분이니 기억!)

그럼 이렇게 전달한 props를 어떻게 받으면 될까?

함수사용에 있어, 인자를 입력하듯, (Child(원하는 props이름 입력(여기에서는 "apple"))) 받아오면 된다!

이렇게 되면 apple = {text =  "I'm the eldest child"} 라는 props가 만들어지게 된 것이다. 

 

이제 실제로 props를 사용하기 위한 모든 준비는 끝났다! 

실제로 어떻게 사용하면 될까? 우리가 만든 props는 객체의 형태를 띈다고 하였다. 

그렇기 때문에 객체의 값에 접근했을때 처럼, apple.text라고 하게 되면 그 값인  "I'm the eldest child"에 접근할수 있다. 

 

여기에서 약간 주의 할 점이 필요한데, 위의 Child에 text라는 키와 값을 속성값으로 줄때, 단순한 text이기때문에 ""string형식으로 간단히 줄 수 있지만, 함수나, 컴포넌트의 값을 알고 싶다고 한다면, 

이렇게 원하는 값을 {} 중괄호로 묶어서 값을 설정해야 한다. 

위의 예에서는 hadleDelete라는 key로, handleDelete라는 함수 전체를 값으로 props로 전달

'key'라는 key로, tweets라는 배열을 필터 돌린 결과를 map할때 el의 id를 값으로 props로 전달

'tweet'라는 key로, tweets라는 배열을 필터 돌린 결과를 map할때 el 자체를 값으로 props로 전달

하게 되는 것이다. 

 

그리고 이렇게 {}중괄호안에 넣어서 전달하였기때문에, 받을때에도 

 

이런 형식으로 {}중괄호 안에 넣어서 받으면 되게 된다!