REACT 폐관수련ing
Children 그것은 도덕책이었다...!
🙎♂️ 리덕스 공부나 하시지 갑자기 그게 뭔소리여
🤷♂️ 리덕스도 리덕스인데 리엑트를 더 잘하고 싶은걸 오또케얌
🦭 나는 이번 프로젝트에서 React의 기능을 극대화 하고 싶었다... 그래서
이번엔 다른건 몰라도 MODAL CHANG만큼은 기 필 코 재탕이 가능하게 만들어보자🔥 라는
굳은 결심을 팀원들과 다졌다 (물론 다지기는 혼자다지긴 함)
원래 내가 써먹었던 킹-갓 제너럴 MODAL CHANG을 들고와서 사용하려 했으나
이거이거... props자체를 내려주는법은 알았지만 Component를 내려주는법은 몰랐다
저만 몰랐다고요? 당신은 도덕책입니다 😤 거 많이 알면 저 좀 도와주쇼 (대충 굽신거리는 말)
처음에는 못된 나의 버릇이 발동되어 순수뇌지컬로 해결해보려 했지만
역시 실ㅋ패ㅋ 당연히 실ㅋ패ㅋ
아니 제발 모르면 찾아봐라 어? 어? 어???? 구글은 폼이냐고 어?????
암튼 구글링으로 은밀하게 조사를 해 본 결과
으아닛 이것은 ? children....?
🦛 내가 만들고자 한 것을 정리해보면
1. Modal을 여는 버튼을 클릭 하였을 때 열리는 Modal 안의 <div></div>사이에
Component를 넣어서 사용
2. Modal.js 재사용이 가능하여야함
그걸 가능하게 해주는 마법의 React 기능이 바로바로 children!!
일단 공식문서를 먼저 보면
🦭 이렇게 친절하게 설명이 되어있다. 공식문서는 2회독 한 것 같은데 왜때문에 나는 새롭지
아무튼 저 말을 한줄요약 한다면
👉 태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props
그렇다 어떤 props말고 그냥 component의 모든것을 통으로 내려주는 props같은 것이었다..!
children 단어가 귀여워서 기냥 그런줄 알았는데 알고보니 엄청난...것이었다...!
번외지만 저렇게 children에 메서드를 사용할 수 있다고 한다
그래서 넌 어떻게 아이들(ㅈㅅ children)을 사용했누 ?
🦭 일단 내가 사용하고자 하는 Modal.js를 소환했고 props로 children을 넣어주었다.
빨간줄이 많은 것은 ES Lint덕.... 나도 저거 보기 힘듬 눈갱이해좀 ㅠㅠ...
🦭 그리고 내가 Modal안(태그 안)에서 사용하고 싶은 Component를 저렇게 넣어주었더니
원하는 Modal만들기 성공...! 인줄 알았으나
글을 작성하고 onCreate(글을 state에 넣어주는 함수 만든이 : 나)을 실행시키면
Modal이 자동으로 닫히게 만들어주고싶은 욕심이가 생겼다
🤷♂️ chlidren과 props를 함께 내려줄 순 없을까 ?
다시 은밀하게 구글링을 해보니
🦭 킹 갓 제너럴 공식문서 = 마법의 소라고둥 🐚
저런 기묘한 방법으로 할 수 있었다 !
공식문서가 어렵다면 이 블로그를 참고해요 릭클릭클 !
🦭 일단 Modal을 on/off해주는 함수openModalHandler()를 onCreate안에 요롷게 넣어주고
🦭 글 쓰는 Component에 props로 내려준다 !
🦭 그리고 저 기묘한 React.cloneElement()를 사용해서 props를 내려주면 완 성!
(순서가 바뀐것같다구요? 스크롤 방향을 반대로 해보세요! 그럼 순서 정방향 올ㅋ)
살짝 북쪽의 공산당st 디자인이지만... (아직 CSS안해서 그래요 이해좀...)
그래도 내가 원하는 기능은 다 만들기 성공성공 대 성공 !
오늘의 삽질 🥄
에러코드를 쓰는건 Notion에서 하기로 했던 것 기억하나요? 못한다고요? 뭐야
암튼 앞으로 삽질은 링크를 걸겠습니다 !
날카로운 에러 파수꾼
오늘의 일기
코드 치는 시간보다 검색하고 공부하는 시간이 더 길었다.
역시 알면 알수록 재밋다 React !
맨날 에러보고 웹페이지가 드러눕고 하얀창으로 파업도 하지만
미운정 고운정 다 들어서 그런가
한번만에 뙇 되면 좋..겠지만 그래도 에러뱉어주는 React가 참 죠타..!
내일은 오늘보다 조끔 더 발전했겠지 ? (제발)
Sae Eleisa Tera Vi
