[TIL] 1/27 React 숙련주차(1)

간편하게 컴포넌트 꾸미기

작업하는 파일에서 터미널 - yarn add styled-components - 익스텐션에서 styled-components 깔아준다

import styled from "styled-components"; 해준다

변수명 적고(맨 앞 대문자) styled.<태그명> 적고 ``안에 css 값을 넣어준다

컴포넌트 나눠서 사용하는 것과 동일하게 사용하면 된다

<변수명><변수명/>

이 방법의 장점은 js를 같이 쓸 수 있다는 것

전역 스타일 적용

다른 파일에 컴포넌트 함수 만들고 body{}를 담는다

이걸 body 상단에 <>로 호출해주면 적용된다

useState

: state의 값이 변경되면 리렌더링이 일어난다

set00으로 값에 접근한다

useEffect

: 리엑트가 렌더링 된 이후마다 특정 작업을 수행하게 하는 리엑트 훅

즉, 어떤 컴포넌트가 화면에 보여졌을 때 / 사라졌을 때 어떤 일을 수행하게 하고 싶다 할 때 사용

리렌더링 할 때마다 실행되기 때문에 사용에 조심해야 한다

-> useEffect에 의존성 배열을 넣어줌으로 배열의 값이 바뀔 때만 실행하게 할 수 있다

의존성배열 : useEffect가 의존하고 있는 값의 배열로 배열에 값이 바뀔 때만 실행하게 한다
useEffect(()=>{},[])로 두번째 인자에 배열을 넣어준다. 만약 빈 배열로 두는 경우 전체 렌더링이 일어났을 때 실행시킨다는 뜻

css를 js 안에 넣어서 사용하는게 신기했다

편리할 것 같음과 동시에 익숙해지기 전에는 아주 헷갈릴 것 같은 느낌이 든다

useState에 익숙해졌다 싶으니까 새로운게 등장했다

처음에는 힘들어도 반복하다보면 괜찮아질 것이다 분명히!!

설날 기간에도 매일 한번씩 메달 트래커 만들어서 useState 사용에 익숙해져야지

TRY