to do list 만들기_1 (프로젝트 생성 및 초기화)
2021. 3. 11. 20:35
프로그래밍/React
작업환경 설정 ✔ Node ✔ yarn create-react-app 설치 및 사용 페이스북에서 만든 리액트 프로젝트 생성 도구인 create-react-app 을 사용 수많은 리액트 boilerplate 와는 다르게, 정말 프로젝트에 필요한 기능만 딱 들어있음 create-react-app 을 설치하려면 일단 글로벌 설치 필요 yarn global add create-react-app 그 다음, 아래의 명령어를 통하여 프로젝트를 생성 create-react-app to_do_list 그러면 명령어를 실행 디렉토리에 to_do_list 라는 디렉토리가 생성 코드 에디터를 사용하여 해당 프로젝트 디렉토리를 열고, to_do_list 디렉토리에 들어가서 다음 명령어 실행 yarn start 화면이 나오면 성..
props와 state 개념
2021. 3. 4. 20:39
프로그래밍/React
props와 state 개념 리액트에서는 '컴포넌트'라는 구성단위로 프론트 개발을 함 컴포넌트는 구성요소라는 뜻인데, 화면을 구성하는 요소들을 각각 만들고 그것을 하나로 합쳐 하나의 페이지가 되는 형식임 이 컴포넌트 또한 작게 쪼개서 작은 부분을 합쳐 하나의 컴포넌트로 만들 수 있음 하나의 컴포넌트 안에서 쪼개고 쪼개기를 반복하면 하나의 작은 tree 구조처럼 될 수 있음 큰 요소 안에 작은 요소가 있으니 부모 자식의 관계가 형성될 수 있음 ❓ 그럼 리액트로 개발할 때 중요한 개념인 props 인자와 state는 무엇일까 props props는 property의 약자로, 부모에게 받아온 데이터 리액트의 Data Flow는 단방향 형식으로 부모에서부터 자식으로 이동하기 때문에 거꾸로 올라갈 수 없음 따라서..
react-router-dom
2021. 3. 3. 20:47
프로그래밍/React
react-router-dom 네비게이션을 만들어주는 패키지 SPA앱을 만들 때 많이 사용되는 react-router-dom패키지 create-react-app을 이용해 진행 ✔ react-router - 웹&앱 ✔ react-router-dom - 웹 ✔ react-router-native -앱 react-router-dom 설치 npm에서 설치를 진행 npm i react-router-dom 완료되면 App.js에서 import문에 다음을 추가 import React ,{Component} from 'react'; import { BrowserRouter,Route, Link,Switch } from "react-router-dom"; import된 BrowserRouter, Route, Link, ..
SPA(Single Page Application)
2021. 3. 2. 20:40
프로그래밍/React
SPA란? 단일 페이지 애플리케이션 기존의 전통적인 새로고침 방식의 웹과는 달리 필요한 정적파일을 한번에(나눠서도 가능) 모두 다운로드 받고, 이후 사용자와의 상호작용 가운데 필요한 데이터만 서버에서 동적(비동기)으로 받게하여 트래픽의 총량을 줄이고, 네이티브 앱과 유사한 사용자 경험을 제공할 수 있는 어플리케이션 형태 첫 페이지 요청시 단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩하고, 그 이후로는 페이지 리로딩 없이 필요한 부분만 서버로부터 받아서 화면을 갱신 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있음 👉 만약 데이터가 전혀 필요 없다고 한다면 서버와 통신할 일 없음 SPA 방식은 Angular, React,..
state 활용하기
2021. 2. 23. 20:25
프로그래밍/React
state활용해 5초 후에 내용 바꾸기 예제 Loading → Finish(5초 후) import React from 'react'; class App extends React.Component{ state = { isLoading: true }; componentDidMount() { setTimeout(() => { this.setState({ isLoading: false }); }, 5000); }; render() { const { isLoading } = this.state; return {this.state.isLoading ? "Loading" : "Finish"}; }; } export default App;
Component Life Cycle
2021. 2. 22. 20:55
프로그래밍/React
Component Life Cycle // 맨 처음에 실행 constructor(props) { super(props); console.log("hello"); }; // 랜더링시 실행 render(){ console.log("I'm rendering"); return ( The number is: {this.state.count} Add Minus ); } // 랜더링 완료 후 실행 componentDidMount() { console.log("component rendered"); }; // 변경 후 랜더링 이후 실행 componentDidUpdate() { console.log("I just updated"); }; // 페이지 이동이나 연결 종료시 실행 componentWillUnmount() {..
component 예제
2021. 2. 19. 20:08
프로그래밍/React
component 사용하기1 import React from 'react'; function Food({ name, picture, rating }) { return ( I like {name} {rating}/5.0 ); }; const foodILike = [ { id: 1, name: "pasta", image: "https://assets.bonappetit.com/photos/5de7e495b79e20000879d72a/1:1/w_2560%2Cc_limit/Amiel-Lobster-Pasta-Lede-1.jpg", rating: 5 }, { id: 2, name: "chicken", image: "https://crcf.cookatmarket.com/product/images/2019/10/lo..
create-react-app 설치
2021. 2. 17. 21:24
프로그래밍/React
create-react-app 설치 리액트 사용을 위해 webpack, babel등 설치 했던 것을 하나의 명령을 실행하여 React Web App을 Set up함 원하는 위치에서 create-react-app 설치하기 npx create-react-app movie_app(원하는 폴더명) 설치 완료🎉 👉 터미널에 npm start 명령어를 통해 실행 확인 npm 오류 🚫 npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. node.js, npm, npx 모두 설치 되어있는데 위의 오류 뜨는 경우 VSCode 다시 실행시켜보기!