본문 바로가기

내마음대로만들어보자/React58

styled-components 우선 styled-components 사용을 위해 패키지부터 설치해보자. 1. styled-components 패키지 설치 * yarn add styled-components 2. styled-components 장점 - class 이름을 별도로 지을필요가없다. - 컴포넌트에 스타일을 바로 작성하므로, 간단하고 직관적 3. styled-components 적용예시 우리가 설치한 패키지를 import 해오는것을 잊지말자! background-color: ${(props) => (props.bgColor를 ? "red" : "purple")}; → 삼항연산자를 활용한 배경색 넣기 hello React! → 이런식으로, 컴포넌트에 바로 스타일을 적용하므로 직관적이고 간단하다. 별도 class 이름을 지을필요도.. 2021. 7. 12.
SCSS 개념 CSS를 편하게 사용하게 하기위해 도와주는 친구다. SCSS는 SASS의 3번쨰 버전에서 추가된 녀석이고, SASS의 모든 기능을 사용할 수 있고 CSS와 호환도 잘된다. 먼저 파일을 위와같이 생성해서 기존 style.css 내용을 복사해서 적용해보자. App.js 에 임포트해주는것도 잊지말자! import "./scss_ex.scss"; SCSS 사용을 위한 주요 패키지도 설치해주자! 이걸 설치하지않는경우 오류가 발생할 수 있다. yarn add node-sass@4.14.1 open-color sass-loader classnames 설치 후 yarn start ! 1. SCSS의 주요문법 자세한 내용들은 공식문서를 참고해보고 자주사용되는 내용들만 우선 공부하자 https://sass-lang.com.. 2021. 7. 9.
클래스형 컴포넌트 와 함수형 컴포넌트의 차이 요새는 함수형 컴포넌트를 주로 사용을 하지만 아직 클래스형 컴포넌트를 사용하고 있는 기업들도 있기때문에 원활한 유지보수를 위해 개념정도는 알고있어야 한다고 한다. 1. 선언 방식 가장 큰 차이점으로는 컴포넌트를 선언하는 방식에 있다. state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨] 메모리 자원을 클래스형 컴포넌트보다 덜 사용한다. 컴포넌트 선언이 편하다. state, lifeCycle 관련 기능사용 가능하다. 메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다. 임의 메서드를 정의할 수 있다. 2021. 7. 9.
클래스형 Component 2021. 7. 6.

티스토리툴바