React8 [React] Publishing / GitHub Pages에 배포하기 create-react-app을 통해 만든 React 프로젝트를 GitHub Pages에 배포하는 방법을 알아보자. Github Pages는 무료로 정적인 웹페이지를 만들 수 있도록 해준다. html, javascript, css 파일을 올리면 웹사이트로 만들어서 전 세계에 무료로 배포해주는 서비스이다. 1. gh-pages를 설치 npm install gh-pages Github Pages 사용을 위해 우선 gh-pages를 설치해준다. gh-pages란 github pages에 업로드할 수 있게 해주는 패키지이다. 2. Build package.js 파일을 확인해보면 build라는 스크립트가 있다. "scripts": { "start": "react-scripts start", "build": "re.. 2022. 1. 31. [React] Cleanup Cleanup useEffect 사용 시 컴포넌트가 생성될 때뿐만 아니라 사라질 때도 함수를 실행시킬 수 있다. useEffect 참고 [React] useEffect useEffect react.js에서는 component를 새로고침 한다. 즉 새로운 데이터가 들어올 때마다 UI를 refresh 한다. 하지만 필요하지 않은 경우에는 이 장점이 문제가 될 수도 있다. 처음 실행될 때 혹은 컴포넌 yeoeun-ji.tistory.com 아래 코드는 Show 버튼 클릭시 Hello컴포넌트가 생성되고 Hide 버튼 클릭 시 컴포넌트가 사라지는 코드이다. import { useState, useEffect } from "react"; function Hello(){ return ( Hello ); } funct.. 2022. 1. 30. [React] useEffect useEffect react.js에서는 component를 새로고침 한다. 즉 새로운 데이터가 들어올 때마다 UI를 refresh 한다. 하지만 필요하지 않은 경우에는 이 장점이 문제가 될 수도 있다. 처음 실행될 때 혹은 컴포넌트 안에 특정 데이터가 변화할 때만 실행하고 싶은 경우가 있을 수도 있기 때문이다. 이런 경우 useEffect는 컴포넌트가 화면에 나타날 때, 사라질 때, 업데이트 될 때 다시 렌더링을 해주는 함수이다. 아래 코드는 버튼 클릭시 counter변수가 1씩 증가하도록 하는 코드로 로그를 찍어 확인해보면 state가 변경될 때마다 다시 렌더링 된다. import { useState } from "react"; function App() { const [counter,setValue].. 2022. 1. 29. [React] Component에 스타일 추가하기 [React] React 시작하기 create-react-app create-react-app이라는 CLI 도구는 많은 스크립트와 사전 설정(개발서버 접근, 새로고침, css포함 등)을 준비해줌으로써 ReactJS어플리케이션을 만들기 쉽게 도와준다. 리액트 프로젝트를 yeoeun-ji.tistory.com 지난 포스팅에 이어 버튼 컴포넌트를 추가하여 버튼 스타일을 추가해보자. 우선, create-react-app으로 생성된 src 디렉터리 밑에 버튼 컴포넌트 파일을 생성한다. Button.js function Button({text}){ return {text}; } export default Button; App.js파일에서 생성된 Button컴포넌트를 import하고 사용한다. App.js impor.. 2022. 1. 29. [React] React 시작하기 create-react-app create-react-app이라는 CLI 도구는 많은 스크립트와 사전 설정(개발서버 접근, 새로고침, css포함 등)을 준비해줌으로써 ReactJS어플리케이션을 만들기 쉽게 도와준다. 리액트 프로젝트를 시작하는 방법은 다음과 같다. 1. nodejs 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org nodejs 다운로드하고 콘솔창에 'node -v' 입력 후 설치를 확인한다. 버전 정보가 출력되면 설치 완료. 2. npx 설치 npm 과 npx 차이 npm은 node.js의 자동화된 의존성과 패키지 관리를 위한 패.. 2022. 1. 29. [React] Props Props Props는 Properties의 약자로 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 전달할 때 사용된다. Props는 변하지 않는 데이터이다. 1. props 지정 props는 상위 컴포넌트에서 하위 컴포넌트의 속성처럼 사용된다. function App (){ return( ); } 위 코드는 함수형 컴포넌트이다. Btn의 부모 컴포넌트인 App 컴포넌트 안에서 Btn 컴포넌트의 props인 text와 fontSize값을 지정하여 함께 호출해준다. 2. props 사용 보통 props 값을 사용할 때 props.text, props.fontSize와 같이 props. 키워드를 붙여 사용하는데 아래 코드와 같이 비구조화 할당 문법(구조 분해 문법)을 사용하여 내부 값을 추출할 수 있다. 즉, .. 2022. 1. 27. 이전 1 2 다음
