코딩걸음마4 [React] scss안에서 다른 scss파일 부르기, scss @mixin , 변수 이용 난진짜 이런게 있는지 몰랐지... 😭 보충수업을 듣다가 알게된 scss 관련 몇가지 지식들 끄적여 보겠다 ! * scss 안에서 다른 scss 파일 불러오기 @import "경로"; * className에서 {``} 을 쓰면 함수 넣기 가능 !!! 진짜 이건 몰랐다... 내가 구현해야 했던 것이 색상 버튼을 누를 때 마다 그 색상으로 색이 변경되고, text가 같이 변경되는 것을 구현해야 했다. 일반적으로 className은 "" 문자열이지만 이러한 구문의 test 가 아닌 blue 등 다른 변수가 오면서 동적으로 변해야 할때 `` (백틱) => 문자열에서 자바스크립트 혹은 변수를 사용할때 사용 할 수 있다고 멘토님이 알려주셨다. 일단 useState를 이용해 색상을 변경하는 것은 알겠으나 classNa.. 2023. 2. 22. React) 상수데이터 과제를 하기전에.. 아직 배우지 않은 상수데이터에 대해 나오길래 한번 정리를 해보았다. 전에 댓글 구현할때 애먹었던..Javascript의 map을 여기서도 또 쓰게되었는데.. 제발 이쯤되면 익숙해지자..나자신.. 😂 상수데이터란? UI 구성에는 필요하지만 동적으로 변하지 않아서 백엔드로부터 API 등을 통해서 데이터를 가져올 필요가 없는 변하지 않는 정적 데이터를 말한다. 그래서 상수데이터로 UI를 만들때는 백엔드에 요청하지 않고 컴포넌트에서 만들 수 있다. 왜 어떻게 상수데이터를 쓸까? : UI를 보다 효율적으로 확장성 있게 구성할 수 있으며, 특히 반복되는 UI구조는 상수데이터와 map 메서드를 이용하여 간결하게 표현이 가능하고, 그래서 유지보수가 용이하기 때문에 이용한다고 한다. 이러한 상수데이터.. 2023. 1. 29. React) Instagram 간단하게 한 클론코딩 (댓글추가 구현) 인스타 그램 클론코딩 중 내가 아주 애먹었던 😂 댓글구현 과정.. 드디어.. 이해가좀 되어 이렇게 정리하면서 업로드 해본다 👀👊 내가 한 방법은 1. 댓글을에 입력하면 comment 라는 state(초기값=[])에 받아와서 commentList라는 state에 추가하고, 2. 그 배열 형태롤 추가한 commentList에 map함수를 돌려서 배열안에 있는 데이터를 하나씩 가져온 후 3. 배열에서 가지고온 데이터를 라는 컴포넌트에 props로 넘겨주었고, 4. 댓글이 꾸려지도록 가져온 {props.data.commentItem} 로 구현해 보았다. 말로 풀어봤지만.. 뭐라는거지..? 라도 할 수 있으니 코드도 한번 넣어보았다...ㅠ //Main.js function MainFeed() { const [co.. 2023. 1. 28. React) Hook -useState useState를 배우고 쓰고있지만.. 아직까지 너무 혼란..(?) 스러워 이렇게 정리를 해본다..😂😂👊 Hook이란? : 클래스 컴포넌트에서만 사용할 수 있었던 상태관리와 라이프사이클 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해 주는 함수이다. Hook을 사용할때 규칙 2가지 1. Hook은 함수 컴포넌트 혹은 custom hook안에서만 호출할 수 있고, 2. 함수 컴포넌트 내의 최상위에서만 호출해야한다 React 에서 State란? - 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값으로 UI에 보여줄 정보를 결정할 때 사용할 수 있다. - 컴포넌트 내부에 있어서 내에서 정의및 사용을 하고 얼마든지 변경할 수 있다. 어떻게 사용할까? //Main.js import React from 'r.. 2023. 1. 27. 이전 1 다음
