props3 Styled Component # Styled Components -기능적(functional) 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할수있는 아주 단순한 패턴을 제공한다. -HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할수있게 된다. 그게 CSS in JS 라이브러리이고. 그중에서 현재 가장 인기있는 라이브러리가 Styled Components이다. 즉, Styled Component는 CSS-in-JS라이브러리 중 하나이다. -CSS를 컴포넌트화 시킴 # 사용법 //설치하기 npm install --save styled-components //styled-components를 사용할 파일로 불러와라. import styled from "styled-components" /.. 2023. 2. 21. state state: 컴포넌트내에서 변할수있는값 리액트에선 자주 바뀌는 중요한 데이터를 변수말고 state로 저장해서 써라!! state는 변경되면 HTML이 자동으로 재렌더링이 된다(HTML이 새로고침없이도 스무스하게 변경됨) #state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공한다. #useState를 이용하기 위해서는 react로부터 useState를 불러와야한다. import { useState } from "react"; import React, { useState } from "react"; #이후 useState를 컴포넌트 안에서 호출해준다. 호출해준다는건 state라는 변수를 선언하는 것과 같으며, 변수의 이름은 아무이름이나 상관없다. 일반적인 변수는 함수가 끝날때 사라지지만.. 2023. 1. 26. Props #state (상태) -살면서 변할수있는값 -컴포넌트의 사용중 컴포넌트 내부에서 변할수있는값 (외부의 영향을 받지않고) -state는 컴포넌트내부에서 변화하는값, 외부의 영향을 받지않고 / 나이, 현재사는곳, 취업여부, 결혼연애여부 -props는 외부로부터 전달받은값 /이름, 성별 -컴포넌트의 속성(property)를 의미한다. 성별이나 이름처럼 변하지 않는 외부로부터 전달받은값으로, 웹애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. -부모 컴포넌트(상위컴포넌트)로부터 전달받은값이다. props를 함수의 전달인자처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 react엘리먼트를 반환한다. 따라서 컴포넌트가 최초 렌더링 될때 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할수있.. 2023. 1. 26. 이전 1 다음
