728x90 반응형 프로그램/react6 [react] Router Single Page Application(SPA) 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지에 컴포넌트를 통해 동적으로 다시 작성하여 클라이언트와 소통하는 웹 애플리케이션이다. 필요한 모든 소스는 하나의 페이지에서 새로고침 없이 동작하게 된다. 그러나, SPA를 기반으로 개발할 때 흔히 겪는 어려움 중 하나는 웹페이지의 라우팅이다. 기본적으로 SPA에서 라우팅을 구현하게 되면 url path가 아닌 현재 어떤 컴포넌트가 렌더링 되어야 하는지 state를 통하여 관리를 한다. 이렇게 되면 다음과 같은 문제가 발생하게 된다. 1. 컴포넌트가 전환되어도 브라우저 주소창의 URL은 고정되어 있기 때문에 특정 페이지에 대한 즐겨찾기 등록이 불가능하다. 2. 뒤로가기 버튼을 누르면 해당 앱 내에서 이.. 2022. 3. 2. [react] props props props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용한다. parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용된다. props 추가하기 컴포넌트에서 변하지 않는 데이터가 필요 할 땐, render() 메소드의 내부에 안에 { this.props.propsName } 형식으로 넣고, 컴포넌트를 사용 할 때, 괄호 안에 propsName="value" 를 넣어 값을 설정한다. src/components/Header.js import React from 'react'; class Header extends React.Component { render(){ return ( { this.props.title } ); } } expo.. 2022. 3. 2. [react] 리액트 초기 프로젝트 생성 리액트 프로젝트 생성 및 실행 방법 프로젝트 생성 프로젝트 생성 명령 설치하기 npm install -g create-react-app 위 명령으로 리액트 프로젝트를 생성하는 create-react-app명령을 설치했다. -g옵션이 주어졌기 때문에 시스템 공통 폴더에 설치된다. 따라서 프로젝트를 새로 생성할 때마다 위 명령을 반복할 필요가 없다. npx 로 프로젝트를 생성해야 하는데 npx 를 설치하기 위해서는 npm 을 통해서 설치 가능하다. npm install npx -g 프로젝트 생성하기 npx create-react-app [프로젝트이름] create-react-app명령을 실행하여 프로젝트를 생성할 수 있다. 프로젝트 이름으로 영어 대문자는 사용이 불가능하다. 프로젝트 실행 생성한 프로젝트 폴.. 2022. 3. 2. Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0 Failed to compile ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss) Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0. This error occurred during the build time and cannot be dismissed. React sass.. 2021. 7. 1. 리액트 프로젝트 생성 npx create-react-app my-app cd my-app npm start 2021. 6. 30. 리액트 네이티브 프로젝트 만들기 타입스크립트 사용 생성 npx react-native init 프로젝트명 --template react-native-template-typescript 설치시 오류가 발생시 기존에 설치된 버전 삭제하고 최신 버전으로 다시 설치하면 오류가 없어진다. npm uninstall -g react-native-cli 최신 버전 설치 npm i -g @react-native-community/cli or yarn global add @react-native-community/cli 2021. 6. 28. 이전 1 다음 728x90 반응형
