~0509 React props 낙곱새 궁금해

아 블로그에서는 백예린 좋아하는거 티 안낼라했는데 하지만, 어찌 태양을 손으로 가린다 한들 세상이 어두워 지겠는가? 눈부시다. 백예린

복학까지 어느덧 4개월 남은 5월이 왔다. 요즘 친구들을 만날 때면 시간 진짜 빠르지 않냐? 하는데

나 빼고 다 느린 시간 속에 살고 있나 보다. 다들 느리다고 한다. 암만 봐도 너무 빠른데 三三ᕕ ⍢⃝ ᕗ

남은 4개월도 전역하고 보낸 4개월보다 더 보람찬 4개월을 보내자는 각오를 갖고 5월을 맞이했다 서론이 길었네 고

---

오늘은 저번시간에 열심~~히 만든 변환기 다 지우고 시작한다. 본격적으로 클론코딩 프로그램을 시작하려나 보다.

눈물을 머금고 저번에 만든걸 지운 후,  배우려는 개념은 prop이고,  배우기 위해서 만들건 두 개의 버튼 끝!

당연히 버튼을 만드는 것 보다 안에 들은 동작원리와 prop, 컴포넌트의 개념을 이해하자.

 

아쉽지만 저번에 만든거 다 지우고 이것 만 남겼다.

우리가 앱을 만드는 상황이라고 가정하고, 변경한 내용을 저장하는 저장버튼,  확인 버튼을 return 해주는 함수 두 개를 만들고

App함수 안에 넣었다. App안에 함수형 컴포넌트가 두개 들어간 상황이다. 실행하면 버튼 두 개가 생성된다.

위의 설명한 내용 그대로

그다음 버튼을 꾸며주려 하는데 기존에 html을 사용할 때는 보통 원하는 태그안에 style을 선언하거나 css를 이용한다.

이 경우에 원하는 양식을 모든 버튼에 적용하려면 복붙해야하는데 스타일 양식 자체를 컴포넌트로 바꾸어서

각 버튼의 이름 SaveChanges, ConfirmChanges이것만 다르게 하려 한다. 

밑의 설명을 보면서 이해하자

함수형 컴포넌트 두개중 하나만 남기고 함수 명도 Btn으로 바꾼다. 하나의 스타일 양식 가지고 두 개의 버튼을 만드려고 하니까 오키? 그다음 앱에서 렌더링은 당연히 Btn두개를 하는 걸로 바꾼 상황이다. style양식도 구현했다.

style {}로 표현하고 안에 style object를 추가할 때 {}를 다시 사용한다. 배경색, 글자색, 간격 등을 조절하고 마쳤다.

이제 props를 사용하고 이해할 시간이다.

 

여기부터 짱구를 잘 굴려보자 데굴데굴

img의 src="", button의 onclick과 같은 syntax를 컴포넌트에서도 사용가능하고이 syntax를 통해 우리는 새로운 정보를

전달할 수 있다. 그래서, 이 기능을 통해서 한개의 버튼 컴포넌트 양식을 통해 두 개를 다르게 만들 것이다.

위의 사진에서 Btn함수의 ()안에서 prop을 전달받고 이렇게 전달받은 인자는 첫 번째 인자가 된다. 코드를 따라가 보자

1. (line27,28) Btn두 개는 각각 banana="Save Changes" banana="Confirm"이라는 인자를 전달받음
2. 즉, 각 버튼의 banana는 "Save Changes", "Confirm"값을 가짐
3. (line22) button태그 사이 버튼에 표현할 문구에 props.banana를 할 경우 각각 "Save Changes", "Confirm"라고 표현됨 그 이유는 
4. (line13)에서 보이다시피 Btn은 props라는 인자를 처음 전달받고 banana키에 맞는 값인 SaveChanges와 Confirm을 각각 가져와 버튼에 표현해준다.

이러한 방식으로 버튼 두 개를 만들었다. line13, 22에서 props를 이용해서 가져오는 것보다는 banana 그 자체를 가져오는 게 낫다 밑의 코드를 보자

banana는 오브젝트여서{}로 표현된다 }두개 나온건 실수 ㅎ

Btn에서 전달받는 인자를 {banana} 자체로 바꾸고, 버튼의 텍스트 표현도 {banana}를 통해 바로 가져왔다.(더 빠른 방법)

여기까지가 강의 한 개 분량이고 양이 적어 두 개를 듣고 한 번에 정리했다. 여기까지의 결과물

 

크기를 바꾸는 것을 해볼 건데 props에 크기를 지정하는 방법을 통해 크기의 변환이 가능하다.

설명

일단 banana를 text로 바꾸고 (헷갈리지 않게) big이라는 키에 각 Btn에 true와 false의 값을 갖도록 했다.

즉 전에는 text를 props로 사용해 버튼 이름을 바꾸었고 이번에는 boolean을 통해 크기를 조절한다. 이건 부가적인 내용이고

 

이제 해볼 건 Btn에 onclick옵션을 추가해 state상의 변화를 주고 싶다. 크기가 바뀐다던가, 혹은 텍스트가 바뀐다던가

일단은 App컴포넌트에 state를 만든다 useState는 이제 익숙해졌다. 값과, 값을 바꾸는 함수를 가져옴() 안에는 초기 값

이해하기 힘들었나봐 중간과정 캡쳐안하고 마지막에 한번 했네

아코 또 캡처를 까먹었다 더 세밀하게 기억하고 설명해보자. 방금 말한 state의 변화를 주기 위해 React.useState를 사용했다. 초기값은 "SaveChanges" 그리고 value와 value를 변경할 setValue까지 만들었다. saveChanges버튼을 클릭하면 다른 문구로 변경되도록 구현할 것이다.

 

버튼 안에 onClick옵션을 추가해 바뀌도록 한다. 다만 line31에 onClick을 추가한다고 해서 이 prop을 전달받아 onClick으로는 구현을 못한다. prop에서의 onClick은 그저 prop의 이름일 뿐이고 직접 style에 관여하지 못하게 된다.

 

명심해야 할 것이 prop을 수정하더라도 return 내부가 바로 바뀌는 것이 아닌 prop을 받기만 함.

 

버튼에 (15line)처럼 onClick기능을 만들고 그때 {changeValue} 함수가 실행되도록 한다. 실행된 changeValue는 setValue를 불러 RevertChange로 text 값을 변경함. 이러한 과정을 통해 클릭하면 텍스트 문구가 바뀌는 버튼을 만들어보았다.

props와 컴포넌트 간에 협력관계 그리고 어떤 식으로 작성해야 하는지, {}의 유무 등 state변경 시에는? 과 같은 것들을 배워보는 시간이었다.

 

추가로 렌더링 할 때 위 코드와 같이 클릭했을 때 Save Changes만 변화가 있지만 Btn을 하나로 묶이기에 밑에 있는 Btn도 변화되지 않았지만 쓸데없는 렌더링을 겪게 된다. 이 경우 memo라는 기능을 사용 가능하다. 하지만, 시스템 과부하의 원인이 될 수도 있으니 신중하게 사용하자. + 우리가 지금 당장 쓸 일은 거의 0이라고 본다.

 

내용이 긴 만큼 복습도 자주 하자. 리액트는 확실히 라이브러리라서 배우고 나도 두리뭉실하게 이해되고 확 와닿지가 않는 면이 있다. 클론 코딩하면서 단순히 따라 하는 것보다 왜 여기서 이걸 저기서 저걸 쓰는지 더 집중해야겠다.

아 끝 수업하러 가야 돼 (ง •̀灬•́)-•