mystery

2탄입니다. 진짜 사용법에대해서 알아볼건데 잘 따라오셔야 합니다. 왜냐믄 이것저것 뭐가 많이 등장하거든요 분명 보다보면 " 아니~~ 슈바 그냥 useState 써서 props로 떤질까 ? " 이런생각 들거에요 분명 들거야.. 근데 나름 이 원리를 이해하는거 자체가 쪼금 재밌는거 같기도한데요... 하... 암튼 재밌음 따라와보셈... 진짜 마지막으로 몇가지만 더 설명하고 사용법ㄱㄱ 하겠슴다. "아니 사용법 언제알려줌 ㅡㅡ " 이라고 하시겠지만 어쩔수 없음 중요한걸요.. Redux의 필수규칙 3가지입니당. 1. Store는 항상 1개다 . 말글대로 입니다. Store는 그냥 뒤져도 1개라고 생각하세요. 2. State는 읽기전용이다. ! 항상 State는 값을 직접 수정하지 않아야합니다. ( immutabl..

포스팅이 약 3주? 정도 없었는데 이 상노무 Redux를 조금이라도 더 정확히 파악하고 포스팅 하고 싶었기 때문입니다! (사실상 redux만 잡고 있었음) 이 친구는 저번 글에 썼던 Context API 와 비슷한 능력을 가진 친구입니다. 우리를 props 지옥에서 벗어나게 해주는친구. props 연결고리 대신 별도의 공간에서 state를 만드는 느낌인데 자세한건 아래에 설명 하겠어요~ 꽤 많은 사람들이 Redux를 쓴다고 한다. 점유율이 높은편 세상은 앞으로도 더 좋아지면서 이 Redux마저도 간단하게 만들 전역상태관리 도구가 나오겠지만 여튼 세상은 아직 Redux를 쓴다고 합디다~ ( Context API 와 비교했을때 장점이 많이 있더라) 핵 코린이 시점에서 생각했을때 좋은점은 state변경 로직을..

이 친구는 우리를 props 지옥에서 벗어나게 해주는 친구이다. 컴포넌트가 많아지면 어떤 state 데이터를 넘겨줄 때 부모컴포넌의 자식컴포넌트의 자식컴포넌트의 자식컴포넌트 ......~~~ 이런식으로 여러겹 겹칠때도 생겨유~ 이걸 props만으로 해결하려고 하면 아주 화날뿐더러 나중에 알아보기도 힘들어집니다유 이럴 때 쓰는게 바로 context API ! 이친구를 쓰면 어떤 값들을 하위 컴포넌트들이 공유해서 같이 쓸 수 있게 해줍니다. 쉽게 props 없이 컴포넌트끼리 넘겨줄 때 쓰는 방법이라고 생각하면 될듯 방법은 다음과같이~ 1. 범위 생성 app() 밖에 상단에다가 위에 처럼 써주시면 됩니다. StockContext 는 범위를 생성할 변수입니다. 밑에 보면 이해갈거에유 2. 공유할 컴포넌트를 앞뒤..

Ajax는 서버에 새로고침 없이 요청을 할 수 있게 도와주는 친구입니다. 개념부터 잡고 가자면 서버 : 페이지 요청을 하면 페이지를 가져다주는 곳이라고 생각하면 됩니다유 GET 요청 : 특정페이지 or 자료 읽기 등등 URL에 주소치는것도 다 GET요청 입니다유 POST 요청 : 로그인과정을 생각해보면 내가 적은 ID/PW 를 서버로 보내야겠쥬 ? 그런것이 다 POST 요청입니다. 그래서 서버에 이런 요청들을 하면 원래 페이지가 새로고침이 됩니다. 근데 새로고침없이 부드럽게 요청하려면 Ajax를 쓰면 됩니다이 그래서 Ajax를 어떻게 쓰냐~~ 하면 jQuery 라이브러리 ---> $.ajax() 쓰든가 axios 라이브러리 ---> axios.get() 쓰든가 JS ---> Fetch() 쓰든가 하면 되..

이걸 알기전에 Lifecycle hook 이란게 먼저 있었음 Lifecycle hook 이 뭐냐~~ 하면 쉽게말해서 Lifecycle = 생명주기 , hook = 갈고리 component가 등장 했을 때 , 업데이트(재 랜더링), 퇴장했을 때 (Lifecycle) 등의 타이밍에 이런 행동를 하겠습니다~~(hook) 라는거임. class형 컴포넌트에서 쓰던 방식이였고 componentDidMount() , componentWillUnmount() 이런 친구들이 있었음. 시간이 흘러 만들어진 function형 컴포넌트에서는 저렇게 긴 함수 안쓰고 useEffect() 라는 깔끔한 함수를 사용한다고 함. 어떻게 사용하냐 ~~~ 하면 위치는 component 안쪽 html 담겨있는 return 앞에다가 시작하면..

이 친구는 자식 Component에서 부모 Component의 State를 가져다 쓰고 싶을 때 쓰는 친구다. Card Component 에서 App Component에 있는 items 라는 State를 쓰고 싶은 상황이다 요로코럼 하면 된다. 1번 자식 Component에 사용하는 곳에 작명+{state명 or 변수명} 형식을 추가해 준다. 위에 사진에서 items={a} , i={ i } 처럼 작명+{state명 or 변수명} 형식을 추가해 준다. 2번 자식 Component를 만든곳에 원하는 파라미터를 (보통 props를 씀) 입력하고 기존 사용하려던 state명 or 변수명 앞에 '파라미터.'를 붙여준다. 요로코럼 1,2번 처럼 쓰면 무슨 뜻이냐 하면~ props.items 자리에 items.ma..

기본적으로 이 친구들은 파일을 쪼갤 때 사용한다. 모듈화 라고 하는것 같다. 사용법은 다양하다. 예를 들어 내가 State를 하나 만들어서 데이터 바인딩을 하고 싶은데 그 데이터가 너무 길어서 가독성이 떨어진다면 어찌 하겠는가아... 이렇게 상품에 대한 정보처럼 중요한 데이터는 꼭 State에 담아야 하는데, 이런경우 따로 .js 파일로 모듈화 시킨 후 export 와 import를 사용하여 내보내고 불러와주면 된다. export default는 파일 당 한번만 가능함 또 파일 하나에 있는 여러 변수를 다 내보내고 싶다면 요로코롬 써주면 된다. 끝

자 이제 SCSS가 무엇이냐 하면 CSS를 프로그래밍 언어스럽게 작성가능하게 만드는 친구임 CSS에서 변수, 연산자, 함수 등등 요런 아이들을 사용할 수 있게 해주는 친구란다. 근데 또 이걸 쓰려니깐 브라우저는 SCSS 문법을 모른다. CSS 문법을 알고 있을뿐 그래서 SCSS로 짜놓은 것을 CSS로 컴파일 해주는 친구가 필요함. 고로 터미널에 npm install node-scss ㄱㄱ 이 친구가 그 친구임. 사용법은 아주 간단하다. Detail.js 파일에 대한 SCSS 파일을 만들었다. 위 사진처럼 기본적인 셋팅을 하고나서 본격적으로 문법을 배워보자. 첫번째 SCSS에서는 변수에 데이터를 저장해서 쓸 수 있다. 내가 자주 사용할 색상이 있다면....? 위에 사진에서는 '#ff0000'이라는 색상을 ..

이 친구는 라이브러리임 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 자리에 입력한 주소값인거줴~~ 자! 그..