리액트 ContextAPI란

리액트 ContextAPI 이름만 들었을떄 니는 또 뭐하는 기능인데.. 이 생각 들었다 API는 뭐고 .. 아..씌 .. 뭐라는거야 ... 

라는 생각이 들었다  나는 그래서 조용히 공부했다(늘 조져지는건 ㄴ..) 

그래..  편한 기능이니까 만들어 줬겠지 입닥 하고 배웠다 그걸 적는거고  

 

난 간단하고 이해하기 쉬운내용을 좋아한다 개념충이라 애가 뭐하는앤지 모르고 넘어가면 ㄹㅇ 고구마 먹은거 마냥 답답하다

그래서 자세한 내용보단 가벼운 개념을 적는게 포인트라고 보면 됨 

이 친구는 훅은 아니고 그냥 리액트에 내장되어있는기능인데 props 드릴링을 보완하고자 나온 녀석이라고 보면 된다 

자 그럼 내가 들었던 의문들!

드릴링은 뭐고 훅이 아닌 내장기능은 뭐고 .... ~~~ 뭐라뭐라 고민에 휩싸였다 

 

첫번쨰 ~  리액트에서  훅은 도구라고 보면 되는데 이를 구분하는 방법은 보통 훅은 앞에 Use 라는 키워드가 따라온다 UseState, UseEffect ... 등등  그에 비해 애는 그냥 순수 리액트안에 잠들어있는 녀석이라고 보면 된다 

두번쨰가 내용의 핵심이라고 볼수 있는데 그림 보면 내가 설명한내용이 대충 이런거구나 알수 있을것이다 

 

props drilling

리액트 공부하면 초반에 만나는게 Props란 녀석인데 자세한 내용 재끼고 부모가 가진 데이터를 자식한테 상속해줄수 있는거다

상속받은 자식은 상속받은 데이터를  또 자기 자식한테 데이터를 줄수 있고 무한연결  이게 props 전부다  "데이터 상속" 

자식이 부모한테 댐비는 불효짓은 못해서 아래에서 위로는 상속(대느는)일은 할수없으니 참고하고  ㅇㅋ? 이정도면 알고 지나가자 

근데 만약 부모는 하난데 자식이 1억명이라 생각해보자  

1억번쨰 내가 태어났는데 내 위로  형제가 겁나 많아서 맨날 옷을 물려받아가지고 헌옷만 입는다 (실제 데이터는 헌옷은 아님 ㅎㅎ..)

나도 사람이고 이쁜거 입고 싶은데 서럽다

 

엄마가 나한테 걍 다이렉트로 선물주는거 받고 싶지 않은가 ? 나도 자식인데.. 

근데  props드릴링을 하면 나는 걍 날때부터 헌옷을 입어야 하는 인생인거다 하느님이 그렇게 살라고 정해준거다 슬픈린생

엄마가 주는 옷을 1부터 ~ 1억까지 데이터를 거쳐와야 그재서야 옷을 입는거다 

근데 사람인생을 바꿀수만 있다면 모두가 그렇게 하지 않겠는가 내가 하늘에게 소원을 빌어서 새옷좀 엄마한테 받게 해주세요 했는데 하늘이 진짜 소원들어줌  새롭게 시작하는 내 인생 개꿀 

그게 Context API 라는 녀석이다 내가 새옷가지고 싶으면 엄마가 나한테 바로 옷을 선물해주는것이다 

이해가 부디 잘됐으면 좋겠다 ㅎㅎ..

나도 원하는 소원빌고  뿅 하고 이루워졌으면 좋겠다

 

ㄹㅇ 개편하지 않은가? props만 1억번 칠생각하면 치가 떨리는데 아주 시간을 절약시켜줌 굿굿 

그럼 대충 개념은 적은거 같고 사용법도 알아야 뭘 써먹던지 할거니까 그림을 통해 보여드리겠음 글보단 그림이 최고지.. 

 

---

app.js

자 여기 app.js란 폴더가 있다 이 데이터가 탐나서 다른곳에서도 사용하고 싶은데 props말고 ContextApi로 내보내고 싶으면 

일단 내장 기능을 사용할 준비가 되어있어야한다 준비도 안된놈은 사용할 가치가 없다!! 

app 함수 외부에다가 Createcontext() 라는 함수를 선언한다 그럼 자동으로 뿅 하고 임폴트(받아오다)가 뜨는데 

요로콤

그럼 이제 사용할 준비가 된것이다~  사용하기 편하기 위해서  Createcontext() 함수는 변수로 저장을 해놓는다 

자 그럼 다른 컴포넌트에 사용하면 된다 ! 하지만 그전에 변수로 선언된거 옆에 export라고 보이는가?

이 변수를 내보내겠다 이말이다 , 야 ~ 내 저장소 내보낸다 받을준비 해라잉 이뜻이다

 

그런다음에 해야할일이 또 하나 있다 할일 개많누..  그건 바로 데이터를 공유해줄 외부컴포넌트가 연결되 있는 태그를 감싸주는건데

설명하기 빡새다 그림으로 바로 다이렉트로 보여드림

디테일이라는 외부컴포넌트와 태그로 연결이 되어있다 저렇게 생긴게 app.js안에서 연결되었는거임

Detail이라는 외부컴포넌트를 나는 만들어서 app.js shoes라는 스테이트를 상속받는중이다(props임 이건)

근데 Context Api로 데이터를 줄라면 또 이렇게 디테일을 Context.Provider라는 녀석으로 감싸줘야하는것이다 

보살핌 받는거라 생각하자 근데 옆에 value는 뭐냐고? ㅇㅇ 재고라는 useStates로 선언된 녀석인데
이녀석을 값으로 전달하겠다 이거다 value 가 값이란뜻 아니겠는가 재고라는 값 보내겠다 이거임 ㅇㅇ 

외부 컴포넌트

자 이제 부모가 해줄건 다해준거 같다 이제 위 사진 친구가 이제 1억번쨰 자식이라고 치자

애한테 이제 부모가 드디어  데이터를 선물해주는거다 

그렇짐나 선물을 받을라면 자식도 자세가 되어있어야한다 사람은 자세가 중요하다 

데이터를 받아올라면 부모를 불러야 한다 받는건 뭐다 import 부모를 임포트 해온다

경로는 부모가 있는 폴더 경로로 지정하고  그런뒤에 자 이제 나 여기서 사용한다잉에 뜻으로 

useContext함수를 Detail 함수 안에다가 선언해준다 근데 잘 봄면  let {재고 } = useContext(Context) 이거 보임? 

우리가 부모요소에서 선언했던 변수 Context 는 기억나고 ? 그거 함수안에다가 넣어준거임 그거 실행해주세요 ~ 이뜻인거다 

어 근데 뭐냐 let 옆에 재고라고 써져있는건 뭐지.. 라고 생각할수 있음 이건 위에서 설명했던건데 다시 말해드림

app.js에 UseState로 선언해준 녀석인데

app.js 데이터의 재고라는 데이터를 공유하겠다 이말이다 

{ 재고 } 이 모양은 간단하게 말해서 UseState의 재고라는 녀석을 편하게 외부에서 사용할라고 작성한거다 

어려운말로  구조분해할당(destructuring)이라고 하며 배열을 파괴해서 변수에 담아논거다 더 궁금하면 구글 ㄱ

 

난 빡대가리라 그냥 더 좋다고 하니까 사용한다 

 

자 그래서 저 {재고} 라는녀석을 외부컴포넌트 return () 안에 어디든지 넣어두면 재고라는 useState값이 뿅! 하고 나타난다 

useState함수 안에 10,11,12가 있다

 

재고를 외부 데이터에 넣은 모습

 

app.js에 있던 useState에 재고라는 값이 외부에서  뿅 하고 나타났다

지금은 그냥 컴포넌트가 하나라서 Props로 해도 되고 그게 편할수도 있는데 

아까도 말했지만 내가 1억번째 자식이라고 생각하면 이 방법이 더 유용하다고 말할수 있다 

---

근데 사람도 장점만 있는게 아니라 단점도 존재하는데 이 기계언어라고 단점은 없겠는가 

나는 발견 못했는데 휼룡한 형들이 찾아낸 단점을 말해주겠다 

우려먹을려고 다시 가져옴

1. state 변경시 쓸데없는 컴포넌트까지 전부 재렌더링이 되고(재고만 쓰고싶은곳에서 사용해서 랜더링 하면 되는데 다른데도 죄다 재랜더링됨  위에서는 Detail에 Shoes는 재고가 필요 없는 녀석인데 계속 재랜더링 되는거임 .. 시비거는거임 일진 재고가  )

2. useContext() 를 쓰고 있는 컴포넌트는 나중에 다른 파일에서 재사용할 때 Context를 import 하는게 귀찮다 (그렇다고 한다 ) 

---

끝으로 

그래서 설명을 이렇게 뭐 길게 써놓긴 했는데 이런 이유로 사람들은 지금까지 열심히 읽은 Context 잘안쓴다고 한다

삽질해서 블로그 작성했는데 잘 안쓴다고 하니.. 살짝 이럴라고 공부했나..
회의감이 들기도 하지만 그래도 이런게 있다라고 배웠고 읽어주신분들도 그냥 알고 넘어가주면 그걸로 만족

사용할일이 분명 생길수도 있을것이다. 그리고 리액트가 버전업이 되면서 내장기능도 업그레이드 되고 있고 ~~ :) 

그럼 뭐 더 좋은거 있냐고? 있으니까 안쓴다고 하지 그럼 그건대체 뭐냐 빨리 정보 내봐보셈 ㅇㅇ 

그래 그건  바로 상태관리패키지라는 녀석이다

말이 좀 어려운데 구글에 이거 한번 검색해보셈 리덕스, 리코일 , ZUSTAND 3개가 좀 유명함 

근데 이거 설명해주고 싶어도 아직 공부를 많이 못해서 해당 내용은 공부를 하고 나중에 포스팅으로 돌아오겠음 

 

ㅃ2