props란...?TIL(27)

리액트 입문을 공부하면서 props..props..💫 너무 많이 들었다.

분명 부모->자식에게 데이터를 넘겨줄때 받는 인자라고 이해했다.. 여기까지는 좋았다ㅋㅋ 넘겨줄 데이터가 한 줄 밖에 안되니 어떻게 넘어가고 그러는지 눈에 보이니까 쉬웠다.

근데 왠열 점차 시간이 갈 수록 받아야 할 인자들이 많아지니 정신이 없더라...ㅎ💥진짜 props를 이렇게 받아도 렌더링이 된다고?? 이러면서 따라치면 신기하게 되어있더라는.. state는 props를 정확히 알고 넘어가야 된다는 말씀에 ㅠㅠ오늘 props 콘솔에 함 찍어서 확실히 이해하자싶기도하고 기록으로 남겨두면 또 한번 내 지식이 되니까 정리를 해보려고한다.

---

function Card(props){
	const classes = "card" + props.className;
    console.log(props)
    
    return <div className={classes}> {props.children} </div>
  }
 export defalut Card;

물론 이 코드 외에 많은 컴포넌트들이 있다. 

ExpenseDate > ExpenseItem > Expenses > App 순으로 되어 있다.

저기서 Card는 셸과 같은 느낌으로 공통적으로 들어가는  css속성을 묶어서 클래스네임에 속성을 넣어주고 해당하는 태그에 클래스네임을

넣어주는 컴포넌트이다.

위와 같이 콘솔에 뜬다.

1

첫번째로 className: 'expenses' 를 해부해보자면

0,1,2,3,4 => 네모 하나씩을 뜻함

그 안에 props : date, title, amount를 가지고 있음

그리고 여기서 date는 expensesDate.js라는 파일에서 다시 가져오고

있다.

(expensesDate.js -> expensesItem.js -> expenses.js)

 

 

 

 

 

2.

expense-item

여기서 0 : ↓date를 말한다.

                                           1은  ↑ Toilet Paper + amount를 말한다.

-h2: {props.title}을 가지고 있고

-div : {props.amount}를 가지고 있다.

 

3.

Card라는 컴포넌트를 만들어서 공통적인 css를 적용할 수 있다.

classes를 콘솔 해보면 expense,expense-item이라고 나오는데 바로 다른 컴포넌트들의 className이다.

그러면 결국 className을 classes로 갖고 있는 태그는 className ={class, expense-item} 두 가지의 클래스를 가지고 있다.

그리고 다른 컴포넌트에 가서 Card라는 네임만 주면  속성을 편하게 적용할 수 있다.

 

---

오늘은 이렇게 props에 대해서 파봤는데 하나씩 이렇게 콘솔찍으면서 props가 어떻게 들어가있고 확인해보면 이해는 가지만

복잡해질수록ㅠㅠ 어렵다 역시

 

그리고 매니저님이 오셔서 state와 props에 대해서 깔끔하게 잘 얘기해주시고 갔다.

: state - 값! 즉 선언,할당과 같은 상태를 나타낸다.

부모가 만든 state -> 자식이 받으면 props인데 오고가는 데이터는 같다

입장에 따라서 다르다고 생각하면 될꺼같다.

setTest를 주면 새로운 값으로 바꿀 수 있다.   자식이 set~: " " 라고 지정하면 새로운 값이 되는 것이다.

이렇게 간단하게 얘기해주셨는데 이틀정도 들은 강의 보다 훨 이해가 됬다는..?ㅋㅋㅋㅋㅋㅋㅋ

 

암튼 이제 state를 파보러 가봐야겠다. 하나씩 정리하니까 그래도 느리지만 정리가 되어가고 있는 것같다.

오늘 TIL끝😎