코딩걸음마 4

[React] scss안에서 다른 scss파일 부르기, scss @mixin , 변수 이용

난진짜 이런게 있는지 몰랐지... 😭 보충수업을 듣다가 알게된 scss 관련 몇가지 지식들 끄적여 보겠다 ! * scss 안에서 다른 scss 파일 불러오기 @import "경로"; * className에서 {``} 을 쓰면 함수 넣기 가능 !!! 진짜 이건 몰랐다... 내가 구현해야 했던 것이 색상 버튼을 누를 때 마다 그 색상으로 색이 변경되고, text가 같이 변경되는 것을 구현해야 했다. 일반적으로 className은 "" 문자열이지만 이러한 구문의 test 가 아닌 blue 등 다른 변수가 오면서 동적으로 변해야 할때 `` (백틱) => 문자열에서 자바스크립트 혹은 변수를 사용할때 사용 할 수 있다고 멘토님이 알려주셨다. 일단 useState를 이용해 색상을 변경하는 것은 알겠으나 classNa..

React) 상수데이터

과제를 하기전에.. 아직 배우지 않은 상수데이터에 대해 나오길래 한번 정리를 해보았다. 전에 댓글 구현할때 애먹었던..Javascript의 map을 여기서도 또 쓰게되었는데.. 제발 이쯤되면 익숙해지자..나자신.. 😂 상수데이터란? UI 구성에는 필요하지만 동적으로 변하지 않아서 백엔드로부터 API 등을 통해서 데이터를 가져올 필요가 없는 변하지 않는 정적 데이터를 말한다. 그래서 상수데이터로 UI를 만들때는 백엔드에 요청하지 않고 컴포넌트에서 만들 수 있다. 왜 어떻게 상수데이터를 쓸까? : UI를 보다 효율적으로 확장성 있게 구성할 수 있으며, 특히 반복되는 UI구조는 상수데이터와 map 메서드를 이용하여 간결하게 표현이 가능하고, 그래서 유지보수가 용이하기 때문에 이용한다고 한다. 이러한 상수데이터..

카테고리 없음 2023.01.29

React) Instagram 간단하게 한 클론코딩 (댓글추가 구현)

인스타 그램 클론코딩 중 내가 아주 애먹었던 😂 댓글구현 과정.. 드디어.. 이해가좀 되어 이렇게 정리하면서 업로드 해본다 👀👊 내가 한 방법은 1. 댓글을에 입력하면 comment 라는 state(초기값=[])에 받아와서 commentList라는 state에 추가하고, 2. 그 배열 형태롤 추가한 commentList에 map함수를 돌려서 배열안에 있는 데이터를 하나씩 가져온 후 3. 배열에서 가지고온 데이터를 라는 컴포넌트에 props로 넘겨주었고, 4. 댓글이 꾸려지도록 가져온 {props.data.commentItem} 로 구현해 보았다. 말로 풀어봤지만.. 뭐라는거지..? 라도 할 수 있으니 코드도 한번 넣어보았다...ㅠ //Main.js function MainFeed() { const [co..

카테고리 없음 2023.01.28

React) Hook -useState

useState를 배우고 쓰고있지만.. 아직까지 너무 혼란..(?) 스러워 이렇게 정리를 해본다..😂😂👊 Hook이란? : 클래스 컴포넌트에서만 사용할 수 있었던 상태관리와 라이프사이클 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해 주는 함수이다. Hook을 사용할때 규칙 2가지 1. Hook은 함수 컴포넌트 혹은 custom hook안에서만 호출할 수 있고, 2. 함수 컴포넌트 내의 최상위에서만 호출해야한다 React 에서 State란? - 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값으로 UI에 보여줄 정보를 결정할 때 사용할 수 있다. - 컴포넌트 내부에 있어서 내에서 정의및 사용을 하고 얼마든지 변경할 수 있다. 어떻게 사용할까? //Main.js import React from 'r..

카테고리 없음 2023.01.27
728x90