Web/React5 [React] Styled-Components 스타일 컴포넌트 ※ 버전에 따라 사용법이 조금 다르다보니 공식문서를 참고하는 편이 가장 좋다. 공식문서 : https://styled-components.com/docs 스타일 컴포넌트 렌더 import styled, { css } from 'styled-components'; 1. 기본 사용 const Container = styled.div` background: #ffeaa7; `; function Test() { return ( ); } 2. SASS(SCSS)의 중첩 사용과 props 사용 function Test() { return ( green pink ); } const Button = styled.button` width: 100px; height: 50px; border-radius: .. 2020. 6. 11. [React] Hook, State 클래스 컴포넌트와 함수 컴포넌트 리액트 컴포넌트 에서 props 데이터만 다룬다면 함수형 컴포넌트를 사용 할 수 있다. Hook 도입 이전(react v16.8미만) 에는 컴포넌트에서 state, 생명주기(life cycle)를 다루려면 반드시 클래스 문법을 사용 해야했다. 함수 컴포넌트(function component) function Test() { return ( test ); } //또는 const Test = () => { return ( test ); } 클래스 컴포넌트(class component) class Test extends Component { render() { return ( test ); } } 개념적으로 React 컴포넌트는 함수형에 더 가깝다고 한다. 친절한 리액트 개발진.. 2020. 6. 11. [React] JSX, Props JSX / 컴포넌트 컴포넌트는 html을 반환하는 함수. xml이나 html생겼지만 javascript 다. jsx는 리액트 컴포넌트다. 대문자로 시작한다. 커스텀 컴포넌트 생성 프로젝트 폴더 프로젝트명/src/컴포넌트파일명.js 로 컴포넌트 파일 생성한다. 컴포넌트명 첫글자는 대문자로 작성하자. 예) 프로젝트폴더/src/First.js 생성 First.js import React from 'react'; // 컴포넌트 생성시 무조건 써주자 function First() { // 컴포넌트 명 앞은 대문자 return ( // 반환 될 html을 작성 First text ); } export default First //export 해주어야 jsx가 인식한다. 생성한 컴포넌트는 index.js 에서 렌더해.. 2020. 6. 11. [React] create-react-app 작업 내용을 build 하기 빌드를 하면 react 소스를 js 소스로 변환할 수 있다. 즉 NodeJs / React가 구축되어있지 않은 환경에서 동작도 되고, 소스 압축도 해준다. 빌드 하는 방법은 매우 간단하다. 먼저 package.json 파일 하단에 "homepage" : "원하는 경로" 를 적어준다. homepage 에 대한 안내 설명은 하단 링크를 참고한다. https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/deployment.md#building-for-relative-paths 나는 상대경로를 사용하기 위해 "homepage": "./", 로 설정하였다. 경로 설정 후 yarn build 명령어를 입력하면 끝이다. 빌드가 끝나면 프로젝트.. 2019. 7. 16. [React] Windows or CentOS7 / React + create-react-app + yarn + Node js 환경 구축 React를 사용해보고싶지만 webpack / babel 등을 설정하느라 시간을 투자하기 싫을때create-react-app 도구를 사용하면React 작업환경을 명령어 하나로 설정 할 수 있다. Windows 운영체제와 CentOS7 (7.4v) 환경에서의 React + create-react-app + yarn + Node js 환경을 구축해보자 [Windows에서 환경 구축] 1.Node js 설치 NodeJs 공식 사이트(https://nodejs.org/ko/download)에서 Windows Installer를 내려받아 설치한다. 설치가 끝나면 cmd 창에서 버전확인 및 설치여부 확인이 가능하다. 2. yarn 설치 npm은 의존하는 라이브러리 개수가 많으면 속도가 저하된다. yarn은 npm .. 2019. 3. 13. 이전 1 다음
