~0512 proptypes + Recap 준비완료오

최근에 닥터스트레인지 어쩌구 멀티버스를 보고왔다.

닥터 2를 안 봤다면 스포 없으니까 걱정 붙들어 매라. 끄응

영화에서 완다가 자신의 욕심에 개판을 치는데 닥터가 막고 싸우는 내용인데, 이 영화 꽤나 혹평이 많았다. '갑자기 왜 화났냐 완다?'. '쟤네 뭔 이야기 하는 거임?' 등 암튼 그래서 안 그래도 이해 잘 못하는 나 유튜브로 공부 좀 하고 봤다. 

 

이 영화로 단편적으로 완다를 본다면 좀 딱하기는 해도, 절대적인 악 느낌이다. 막무가내에, 제멋대로에, 못말려 짱구

 

근데 앞의 내용이나 완다가 왜 흑화했는지 알고 나면 다르게 보인다. 오히려 막는 닥터가 너무하게도 느껴지기도 한다.

전쟁터 출신, 눈앞에서 가족 잃음, 지구 지켰는데 욕먹음, 어렵게 만난 남편 자기 손으로 죽이고, 부관참시 목격함.

진작에 지구 부셨어도 할 말없는 수준,  완다 지구부셔!

 

아무튼 이렇게 보면 모든 사람들의 행동과 말에는 우리가 보지 못하는 이유가 있고,

행동한 사람의 의도와는 다르게 주변에게, 자신에게 영향을 끼친다는 것이다.

 

갑자기 뭔 소리냐고? 나도 모르겠다 영화 리뷰 하기는 귀찮고 의미 있게 쓰고 싶어서 써봤다.

 

어제 같이 운동한 친구가 하는 일에 오류가 나서 그걸 수정하는데, 시간이 오래 걸려서 꽤나 골치가 아픈 모양이다.

오류를 수정하고, 내가 처해있는 애로사항을 고치는데 드는 노력과 시간을 아깝게 생각 말자 요거다.

누구나 거치는 과정이고 지금 본인이 보기엔 이 행동으로 인해 시간, 노력을 낭비하는 것 같지만, 훗날을 위해

무엇보다 가치 있는 행동 중이니, 자책 말고 힘내자 학준아 + 불안하고 방황하는 20대들아 아자아자!

 

---

 

자, 이제 리액트 이야기를 하자 React의 props 마지막 과정인 proptypes와 props관련 Recap시간을 가졌다.

 

먼저, 오늘 이 개념을 배우면서 할 예제는 지금까지 중 제일 간단하다. prop을 통해 저번 시간에 만든 Btn fontSize를 argument에

포함시켜 기본 지정한 크기 16을 가지는 Btn과 다르게 fontSize={18}를 통해 18로 변경하는 과정이다.

 

우리는 fontSize에는 숫자를 써야 한다. 버튼명에 해당하는 text에는 string을 그런데 우리가 다른 사람들과 코드를 공유하거나

코드를 작성할 때 실수로 fontSize에 string을 작성했다 해보자. 이런 경우 리액트는 따로 오류를 출력해주지 않고 원하는 방식으로 작성이 되지 않았기 때문에 작성자, 팀원들이 도대체 뭐가 잘못됐지 하고 골치 아플 것이다.

 

그래서 리액트가 이러한 오류를 알아채고 알려주는 기능인 propType을 사용한다. 먼저 밑의 코드를 선언하고

https://unpkg.com/prop-types@15.7.2/prop-types.js

Btn안에 props 각각 어떤 type으로 작성해야하는지 알려주는 기능

 

 코드를 저렇게 컴포넌트. propTypes를 통해 안에 prop들이 어떤 타입, 모양을 가져야 하는지 적는다. 

 

쨘

버튼명에 해당하는 text의 경우 string, fontSize의 경우 number형태로 작성되어야 해라고 말해준다.

그리고 line 38 바보인척하고 text에 숫자를 적었다 propTypes가 일을 잘하는지 한번 보자 콘솔 창 On

 

화가 단단히 난 콘솔창 아주 그냥 노발대발 상태다.

이 친구가 말하길 '야 인마 너 text type이 number야 너 Btn에 넣으려면 string 형태로 작성해야 돼' 수정해서 진정시켜주자

propTypes에선 이와 같이 number, string 말고도 function, boolean, array 또한 one Of를 통해 배열의 단어, 숫자 중에서

하나인지를 확인하는 구체적인 기능 또한 가능하다.

 

추가적인 기능으로 끝에 isRequired를 붙일 경우 원하는 형태의 값이 아니더라도 그 상태로 렌더링 한다. 대신 알려준다, 틀리게 적었다고 여기까지가 props를 마무리 그리고 밑에는 Props에 대한 Recap으로 중요한 부분을 적어놓았다.

 

코드를 보면서 잘 마무리해보자.

그래도 다른 파트보다는 props는 좀 재밌었어

 

1.  리액트에선 컴포넌트의 설정이 가능함에 대해서 배움 이를 통해 마크업 또는 스타일을 최대한 재사용할 수 있다
2.  prop을 받을 수 있는 컴포넌트를 만듦 Btn 그 안에 여러 가지 prop들을 작성함
3.  prop은 단지 우리가 인자를 사용해, 컴포넌트에 데이터를 보내기 위한 통로임
4.  prop은 렌더링 되고 있는 Btn 컴포넌트의 부모로부터 전달되고 있음. Btn컴포넌트의 첫 번째 인자 내에서 line14
5.  컴포넌트 안의 props에게 접근하고 싶다면 props.text 또는 props.fontSize 현 코드는 인자를 {} 안에 받아서 {prop}으로 접근 가능
6.  또는 오브젝트 안 요소들을 쉽게 빼올 수 있는 ES6 ->{} 안에다가 원하는 것들을 받아냄
7.  prop을 전달받을 때 사용한 이름과 실제로 사용하는 이름이 같아야 함.