REACT shop project 230919

styled- components 설치하기

터미널에
npm install styled-components 입력해주기

상단에 import해주기

사용법

원래는 style 주려면 clsaaName 설정 후 CSS가서 작업해줘야하는데, styled components 사용하면 js파일에서 컴포넌트로 만들어서 쉽게 사용 가능하다

상단에 css주고싶은 html요소 하나 생성후,

let 작명 = styled.button`
	background : yellow;
    color : black;
    padding : 10px;
    `

백틱을 이용해서 변수를 선언해줌

그리고 html요소 사용할 위치에가서 작명해놓은 컴포넌트 이름 태그로 불러서 사용하기

*** 주의사항 : 컴포넌트 이름이기 때문에 작명 첫 글자는 대문자로 설정해줘야함

yellowBtn은 안되고 YellowBtn은 가능 ~ !

장점

1. CSS파일 안열어도 됨
2. 스타일이 다른 js파일로 오염되지 않음

---

*** 참고 : 오염 방지하려면
컴포넌트.module.css 이렇게 작명해주면 됨

예를 들면,
App.css를 App.module.css로 설정하면 App.js에만 적용이 됨
Detail.module.css로 설정하면 Detail.js에만 적용이 됨

---

3. 페이지 로딩 시간을 단축해줌

---

props로 컴포넌트 재활용하기

만약 YelloBtn말고 OrangeBtn, BlueBtn 등 여러개의 색상이 다른 버튼을 사용하고 싶다면?

위와 같은 코드를 통해 props로 컴포넌트를 재활용하면 됨

${ props => props.작명 };

위 코드는 외부 라이브러리 사용법이라서 이해하기보다 복붙하는게 더 좋을 듯

배경색상에 따라서 글자색을 바꿔주려면 이렇게 삼항연산자를 사용해서 조건을 걸어줄수도 있음

이렇게 기존에 만들어놨던 컴포넌트를 ()안에 넣어서 기존 스타일 복사해서 응용가능

단점

1. JS파일 매우 복잡해짐
2. 중복스타일은 컴포넌트간 import 할텐데 CSS와 다를바가 없음
3. 협업시 CSS 담당의 숙련도 이슈 발생 가능

---

컴포넌트의 LifeCycle

페이지에 장착되기도 하고 (mount)
가끔 업데이트도 되고 (update)
필요없으면 제거되고 (unmount)

컴포넌트에 갈고라 다는 법 : useEffect

mount, update시 코드 실행해주는 react hook ==> useEffect

useEffect 쓰는 이유

• useEffect 안에 있는 코드는 html 렌더링 후에 동작한다
• useEffect 안에 적는 코드들은?
  - 어려운 연산
  • 서버에서 데이터 가져오는 작업
  • 타이머 장착하는 것

왜 이름이 Effect 일까?

• side Effect : 함수의 핵심기능과 상관없는 부가기능
• side Effect에서 따온 말!

---