react9 react hook react component 는 class component 와 functional component로 나뉜다. class component 더 많은 기능을 제공 대신에 코드가 더 길어지고 성능적으로 조금 더 느려진다고 한다. functional component 제공하는 기능이 한정해지만 코드가 짧아지고 성능적으로도 더 좋아진다. 리액트 라이프 사이클 React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl functional component에서는 라이프 사이클 대부분을 사용할 수가 없다 그래서 나온 게 react hook 이라고 한다. reac.. 2021. 6. 15. redux redux는 상태 관리 라이브러리다 Redux is a predictable state container for javascript apps props 와 state props는 properties의 줄임말 부모 컴포넌트가 있으면 자식 컴포넌트가 들어갈 수 있는데 그럴 때 props 를 이용한다 그리고 위에서 아래로 부모 컴포넌트에서 자식 컴포넌트로 이렇게만 보낼 수가 있다. 또 부모 컴포넌트에서 자식 컴포넌트에게 1이라는 데이터를 줬다고 하면 자식 컴포넌트에서는 1이라는 데이터를 바꿀 수 없다. 그래서 부모에서 변경한다음 다시 자식에게 보내야함 state 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 보내는 게 아니고 그 컴포넌트 안에서 데이터를 바꿀 수 있다. 데이터가 바뀔 때 재 렌더링 된다. sta.. 2021. 6. 15. ant design 이용 다운로드 npm install antd --save 사용할 것을 component 탭에서 Ant Design - The world's second most popular React UI framework ant.design 위 사이트로 가서 getStarted에 들어가면 사용법이 자세하게 나와 있습니다. react의 index.js에 아래 코드를 추가해줘야함 import 'antd/dist/antd.css'; // or 'antd/dist/antd.less' 2021. 6. 15. Concurrently 이용 npm install concurrently --save 프론트, 백엔드 서버 한번에 켜기 사용 방법 concurrently Run commands concurrently www.npmjs.com 루트 디렉토리의 pakage.json 에 dev를 추가해 주었고 "concurrently \" 경로 \" \" 경로\"" "scripts": { "start": "node index.js", "backend": "nodemon index.js", "test": "echo \"Error: no test specified\" && exit 1", "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"" }, 2021. 6. 15. 데이터 Flow Axios Cors Proxy npm install axios --save //localhost:3000 import React, {useEffect} from 'react' import axios from 'axios'; import { response } from 'express'; function LandingPage() { useEffect(() => { axios.get('http://localhost:5000/api/hello') .then(response => console.log(response.data)) }, []) return ( 랜딩페이지 ) } export default LandingPage //localhost:5000 app.get('/api/hello', (req, res) => { res.send('안녕.. 2021. 6. 15. 리액트 라우터 돔 다운로드 npm install react-router-dom --save https://reactrouter.com/web/example/basic path : 는 URL이 된다. exact을 붙혀줘야함 2021. 6. 15. BoilerPlate 리액트 구조 _action, _reducers -> Redux를 위한 폴더들 component/views -> Page component/views/section -> 해당 페이지 관련 css 파일이나 component App.js -> Routing 관련 일 처리 Config.js -> 환경 변수같은 것들 정리 hoc -> Higher Order Component의 약자 util -> 여러 곳에서 쓰일 수 있는 것들 구조를 바꿀 때 pakage.json 의 main 부분 "main": "index.js", 백엔드는 서버 파일을 만들어 집어 넣었으니 "main": "server/index.js", 이런식으로 수정해 줘야함 2021. 6. 15. 리액트 연습 codepen 세팅 세팅을 누르면 아래와 같은 창이 나오는데 JS - JavaScript Preprocessor : Babel Add External Scripts/Pens 에서 검색창에 react를 넣으면 실시간으로 react 관련 CDNjs(?)가 나옴 클릭하면 추가됨 영상보면서 공부중인데 4년전 영상이라 codepen이 다르게 생겼다 일단 나는 react와 react-dom을 추가했다 react 파일은 component react-dom은 실제 dom에 렌더링을 하는 부분을 담당한다. 바벨을 쓰는 이유는 구버전 브라우저를 지원하기 위해서 최신 자바스크립트 문법을 es5 형태로 변환하려고 이용 2021. 6. 11. 리액트 설치와 세팅 먼저 node js와 visual studio code가 설치되어 있어야 한다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.. 2021. 6. 9. 이전 1 다음
