styled-components vs emotion 비교

React 프로젝트 시작에 앞서 많은 개발자들이 사용하고 있는 css-in-js 스타일링 방식인 styled-components 와 emotion 중에 선택해서 사용해보기 위해 글을 작성해 보았다. emotion 공식문서 : https://emotion.sh/docs/introduction styled-components 공식문서 : https://styled-components.com/docs 깃허브 styled-components https://github.com/styled-components/styled-components emotion https://github.com/emotion-js/emotion 트렌드 전반적인 다운로드 횟수는 @emotion/react < styled-components..

• format_list_bulleted Frontend/CSS
• · 2022. 10. 12.
• textsms

[React Hooks] useEffect 사용법 - 함수형 컴포넌트 생명주기

1. useEffect 란? useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정한 작업을 실행할 수 있도록 하는 React Hook이다. component가 mount, unmount, update 됐을 때마다 특정한 작업을 처리할 수 있다. -> 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메서드를 useEffect를 사용하여 함수형 컴포넌트에서도 사용할 수 있게 됨 2. useEffect 기본 형태는 다음과 같다. useEffect(effect, deps) effect : 렌더링 이후 실행할 함수(수행하려고 하는 작업) deps : 배열 형태, 검사하고자 하는 값(특정한 값이 변경될 때 effect 함수를 실행하고 싶을 경우 사용) useEffect 함수 불러오기 import Rea..

• format_list_bulleted Frontend/React
• · 2022. 10. 4.
• textsms

[React Hooks] useState 사용법

렌더링 시점 setState 함수를 사용해서 state를 변경하면 해당 컴포넌트는 화면에 다시 렌더링 기본 사용법 const [state, setState] = useState(초기값); state : 현재 상태값이 들어가 있는 변수 setState : state 를 변경 시켜줄때 사용 const [time, setTime] = useState(10); time = 10 // 초기값 setTime(15); // time 값을 15로 변경 기타 사용법 setState 함수의 인자에 콜백함수 사용 setState((prevState) => { return() }); setState 함수의 인자에 콜백함수를 넣어주게 되면 1. 콜백함수의 인자는 이전 상태값을 가지게 된다. 2. 콜백함수의 return 값에는 ..

• format_list_bulleted Frontend/React
• · 2022. 10. 3.
• textsms