mystery

이 친구는 라이브러리임 component 가 매우 많아지거나 여러 파일들로 쪼개져서 관리되는 상태일 때 css 짜는게 어려워진다. (class 명을 중복으로 만든다거나 뭐 그런...) 그리하여 쓰는 것이 styled-components ! style을 미리 박아놓은 component를 만들어 쓰는 느낌이다. 선택사항이긴 함 사용법은 매우 간단하다. 터미널 키고 ~ npm install styled-components 해주시고~ 이렇게 하면 어떻게 된거냐 ~ 하면 padding 값 20px 이 박힌 div 를 '박스' 라는 이름을 가진 component로 만든것이다. 그리고 요로코롬 component 쓰듯이 쓰면 된다. padding 값 20px 이 박힌 div 사이에 "ㅎㅇㅎㅇ" 라고 html 넣어준거임..

검색을 통해 react router-dom 의 hook 이란것을 알게되었다. URL의 parameter 문법이란다. 내 경우엔 상품의 detail을 보여주는 페이지가 여러개 필요했는데 요럴때 쓰면 딱이다. (판매상품의 수 만큼 필요, detail 페이지 레이아웃은 모두 동일 ) 1. 필수 2. 원하는 변수에 담을건데, 이렇게 담으면 item_id 라는 변수 안에 object가 담기고 { } 안에는 사용자가 입력한 URL parameter가 저장된다. Destructuring 문법을 사용함으로써 변수는 여러개 사용 가능 ex) let { item_id , user_id } = useParams(); 3. URL parameter가 뭐냐면~~ ---> : item_id 자리에 입력한 주소값인거줴~~ 자! 그..

강의를 보면서 따라하던 중 useState, useHistory , useParams 라는 훅을 사용하면 해결됩니다.... 라며 자꾸 훅 훅 하는게 아니겠는가? '훅' 이게 대체 무엇인가 검색해봤다. component에는 class형 과 function형 두가지가 있다는 것은 알고 있었다. class형이 먼저 만들어졌고 그 이후 버전에서 function형이 추가됐다던지 뭐 그런식 그래서 ? 훅이 뭐냐구... function component 에서도 class component의 기능을 사용할 수 있게 해주는 스킬 이라고 한다. 또한 이것을 사용하야 function component 에서도 component 상태값을 관리할 수 있고 컴포넌트 생명 주기 함수도 사용할 수 있게 해준단다. 전자는 알겠는데.....

React router - dom 의 Component임 React router는 주소창 입력값이 경로(path) 에 일치하면 그냥 다 출력해 준다고 했슴다. 주소창에 abc.com/main 을 입력했을 때 Switch 태그가 없다면 /main 의 내용과 /:id의 내용을 전부 출력해줄거임. ※ :id 는 "아무 문자열" 이라는 뜻 페이지를 나누려고 Route를 쓰는건데 ... 동시출력을 원하진 않았단 말이쥬..... 그래서 사용하는 것이 Switch 입니당 이 친구는 Switch 사이에 있는 모든 Route 태그 중에 여러개가 중복해서 일치한다면 최상단 Route태그 하나만 출력해줍니댜잇 ! 끝

useHistory hook 을 사용하고 싶다면 .js 파일 상단에 예제1 과 같이 써주세유 그리고 임의 변수 하나 만들어서 useHistory() 를 할당하세유. 이렇게 하면 history 라는 변수에 사용자의 방문기록이 담긴 object가 들어간다! .goBack() 함수를 사용해주면 ... 이제 버튼을 클릭하면 우리가 아는 "뒤로가기 버튼"을 누른거 맹키로 이전 페이지로 이동한다~ 끝

더보기 exact = 정확한 path = 경로 Route 태그 사용할 때 아래 예제 1 에서 주소창에 abc.com/ 입력하면 --> " 메인페이지" 출력 주소창에 abc.com/detail 입력하면 --> " 메인페이지" and "디테일페이지" 둘다 출력됩니다 React router는 path(경로) 에 해당하는 값이 입력되면 전부 다 출력하도록 생겨 먹었답니다. 하하 ​​ 이거이 맘에 안든다 싶으시면 아래 예제 2와 같이 exact path 라고 써주시면 됩니다. 고러면 "정확한 경로에 해당하는 입력이 들어와야만 출력 하겠습니다 " 라는 말이랍니다. 고로 "입력값이 정확히 'abc.com/' 이 아니면 메인페이지는 안보여줄거에요 ~~"" 라는 말 이제 주소창에 abc.com/detail 입력하면 --..