# CSSModule

cherry_

문제 상황 ... 처음으로 문제를 맞닥뜨린 건 꽤 오래됐다. 나는 CSS 파일을 import 하지 않아도 클래스명이 같으면 중첩 적용되는지도 몰랐던 웹 초보였기 때문에 처음으로 CSS가 망가졌을 때 0_0!! 상태로 한참을 머물렀다. 하지만 당시에는 시간이 없어서 대충 클래스명을 바꾸는 데서 그쳤고 (CSS 범위를 적용할 수 있는 줄도 몰랐던 상태), 개발 초기라 파일이 적어서 가능했다. 그러나 이젠 더 미룰 수 없다. 귀국해서 시간도 많이 생겼겠다, 이젠 CSS 모듈! 해보자! > 이번에는 CSS Module 이라는 기술에 대해서 알아봅시다. 리액트 프로젝트에서 컴포넌트를 스타일링 할 때 CSS Module 이라는 기술을 사용하면, CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있습니다. 그렇다고 한다. https://react.vlpt.us/styling/02-css-module.html 이걸 많이 참고했다. 해보자 1. CSS 파일의 확장자

tnsdlznf23

How to get Data? > #### Problem1 : 데이터 받아오기 > 작업을 진행하면 가장 많이 접했던 에러메세지는 data가 null값 또는 undefined로 뜨는 것이였다. 데이터를 받아올때 비동기적으로 받아오기 때문에 생기는 문제였다. useEffect로 데이터를 받아오기 전에는 return문 안의 JSX에 우선적으로 렌더링이 되기 때문에 데이터 값을 가져오려고 하면 오류가 나는 것이였다. > > #### Problem2 : 초기 데이터 설정해주기 > 초기데이터(defalt값)를 어디에 설정해줄 것인지, useState로 데이터를 받을 경우 초기값은 어떻게 세팅할 것인지에 관해 정리가 잘 되지 않았다. > > #### Solve1 : 초기 데이터 설정은 useState의 초기값을 전달 > 해당 방법이 항상 최적의 방법은 아니겠지만, 기본값(로딩전에 보여질 이미지 등)을 useState의 초기값에 받아올 데이터의 형식에 맞춰 설정해주면 아래

zooyaho

CSS module > - create-react-app에서 제공. 컴포넌트에 대해 고유한 클래스와 고유한 버전의 스타일과 클래스를 생성 css파일에 스타일을 작성하고 우리가 사용하는 컴포넌트로만 범위를 한정할 수 있음. css코드와 자바스크립트 파일을 분리하여 사용 가능함. 📎 css파일 > - Button.module.css 생성 📎 import > - import styles from './Button.module.css' 📎 사용 👉🏻 styles.button: styles를 참조하여 사용, styles는 객체이고, button은 클래스~! 📎 class="컴포넌트 이름-클래스 이름-고유한 해시값" 우리가 작성한 스타일은 유지되고 새로운 클래스이름으로 래핑됨 📎 동적으로 사용하기 👾 #01 👉🏻 백틱안에 변수로 선언 후 조건부를 이용하여 class를 추가함.(styles.invalid)

lilys2

리액트에서 css이외에 스타일을 어떻게 넣어줄 수 있는지를 배운 섹션이다. 기존 프로젝트에 스타일을 손대기는 너무나도 큰 일이여서 배운 내용과 예시 코드를 간단하게 정리해보려한다. +)섹션 7의 내용도 간단해서 하단에 짧게 정리해두려한다. inline styles 리액트 안에서 style을 지정해주는 방식이다. {}안에서 삼항 연산자를 써서 스타일을 다르게 지정해줄 수 있다. 예시 코드 step이 현재 버튼의 id값과 같으면 activeStyle이 적용되도록 하는 코드 직접 속성별로 지정해줄 수도 있다. 클래스 이름으로 구분하기 className에서 삼항연산자를 이용하여 이름을 다르게주고, CSS에서 속성을 추가해주는 방법도 있다. 예시 위와 같이 `

leedocs

React Router queryString 주소 뒤에 ?key=value 를 입력하는 형식을 queryString 이라고 한다. 사용법 > ?name=mark 내장 함수 사용하기. query-string npm으로 받아서 사용하기 > npm i query-string Switch 여러 route 중 순서대로 먼저 맞는 하나만 보여준다. exact를 뺄 수 있는 로직을 만들 수 있다. 가장 마지막에 어디 path 에도 맞지 않으면 보여지는 컴포넌트를 설정해서, "Not Found" 페이지를 만들 수 있다. jsx 링크로 라우팅 이동하기 react-router-dom 에서 Link 태그 가져다 이용하기 NavLink 로 라우팅 이동하기 JS 로 라우팅 이동하기 props 전달하기 일반적인 전달 withRouter 사용하기 (HOC)