injae

StyledCompnent를 응용하여 다이나믹한 스타일링과 스타일을 재사용하는 방법들을 정리하려한다. 다이나믹 스타일링 크기를 조절하는 size, 둥근 모양을 지정하는 round라는 Prop을 추가해 버튼 컴포넌트의 크기와 모양을 조절하는 예시를 보며 그 과정을 통해 다이나믹한 스타일링을 하는 법에 대해 알아보자. Button.jsimport styled from 'styled-components';const SIZES = { large: 24, medium: 20, small: 16,};const Button = styled.button` background-color: #6750a4; border: none; border-radius: ${({ round }) => round ? `9999..

Nesting이란? Styled Components에서 지원하는 문법으로, Nesting은 CSS 규칙 안에서 CSS 규칙을 만드는 걸 말한다. Nesting을 활용하는 두 가지 방법인 & 선택자와 컴포넌트 선택자에 대해 정리해보려한다. & 선택자& 선택자를 사용해서 앞에서 만든 버튼 컴포넌트를 호버하거나 클릭했을 때 배경색이 바뀌도록 해볼게요. import styled from 'styled-components';const Button = styled.button` background-color: #6750a4; border: none; color: #ffffff; padding: 16px; &:hover, &:active { background-color: #463770; }`;ex..

StyledComponent란?CSS를 React 프로젝트에 그대로 적용할 때 여러 면에서 불편한 점이있다.이러한 문제를 해결하기 위해 새로운 기술들중에서 가장 인기 있는 기술이 바로 Styled Components이다. 기존CSS 문제점? 1. CSS 클래스 이름이 겹침 예시로 하나의 컴포넌트안에 다른 컴포넌트를 Import한 상황에서 생각해보자면 두 컴포넌트의 CSS 내부의 className이 동일하다면 의도하지 않게 두 CSS가 두 컴포넌트에 모두 적용되버리는 문제가 발생한다. 이는 사용된 클래스 이름이 전역적인 특성을 가지기 때문인데, 한 컴포넌트에서 사용한 클래스 이름을 다른 모든 컴포넌트에서도 사용할 수 있다는 뜻이다.클래스 이름은 모든 곳에서 사용할 수 있기 때문에, import 해오지 않은..

리액트 생명주기(life cycle)란?리액트 컴포넌트는 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 생명주기(life cycle)이 있다.컴포넌트는 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 생명주기를 갖는데 이러한 리액트의 생명주기는 클래스 컴포넌트에서만 사용할 수 있으며,함수 컴포넌트에선 사용할수 없다. 사용하고 싶을 경우 리액트 Hook인 useEffect를 이용하여 비슷하게 작업을 할 수 있다. 출처: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/  앞서 위의 시점에서 발생하는 클래스 컴포넌트의 생명주기를 알아보자. 마운트(mount)컴포넌트가 처음 실행될때 생성단계..

React Hook  이란?리액트 훅은 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16.8버전에 새로 추가된 기능이다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다. Hook의 규칙반드시 리액트 컴포넌트 함수(Functional Component) 안에서 사용해야 함 컴포넌트 함수의 최상위에서만 사용 (조건문, 반복문 안에서 못 씀) 대표적인 React Hook?1. useState상태(state)값을 추가하고 setter을 이용해 변경할 수 있도록 하는 대표적인 기능입니다.const [state, setState] = useState(initialSta..