Component6 [220502] styled-component 사용하기 디렉토리의 역할 src component - 공통적으로 들어갈 컴포넌트 모음 hook - 훅에 관련된 내용을 넣는 컴포넌트 pages - 화면에 출력할 영역을 넣음 reducer - reducer 모음 (useReducer가 아닌 redux 관련) store - Context와 같이 전역상태를 만들어주는 디렉토리 컴포넌트별로 기능을 부여할 수 있는 리액트 특성상 디렉토리는 파일 정리 이상의 의미를 가진다. 보통 기능별로 이렇게 디렉토리를 나누니 가이드 삼자. styled-component 설치하기 $ npm install styled-components styled-components 세팅하기 import styled from 'styled-components' styled-components 사용하기 .. 2022. 5. 8. [220429] useContext + ContextAPI 로 전역상태 관리하기 context란? React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다. 원래 리액트에서는 부모 컴포넌트에서 자식 컴포넌트에게 props로 값을 넘겨주는 방식으로 데이터를 공요할 수 있었다. useContext const value = useContext(MyContext); 만들 리액트 부모관계 구조도 천천히 어떤 순서로 이 구조를 만드는지 이해하는게 목표 Store/Context.jsx - export하는 방법에 따른 import하는 형태의 차이 // Context.jsx // ES6 모듈 export default Store //바로 사용가능 export const a = 10 //객체로 나감 // NodeJS 모듈 module.expor.. 2022. 5. 6. [220419] 최소기능으로 리액트 시작하기 / 세부설정하기 '최소기능'으로 리액트 초기설정하기 리액트를 시작하기 위해서는 총 4가지가 필요하다 1. react 2. react-dom 3. babel 4. webpack $ npm install react react-dom $ npm install -D webpack webpack-cli $ mkdir dist src webpack.config.js, index.html 생성 src디렉토리 안에 index.jsx 생성 -> 리액트 문법을 위한 파일 index.jsx에 hello world을 입력해서 상태 체크하기 const React = require('react') const ReactDOM = require('react-dom') class App extends React.Component{ state={ va.. 2022. 4. 20. [220414] 리스트로 DB 데이터를 다루는 방법 2022. 4. 17. [220414] 리스트의 단점을 극복하는 상태 끌어올리기 리스트의 단점 리스트에서 props는 부모->자식 간에 데이터를 전달이 가능하게 해주지만, 동일선상에 있는 관계에서는 데이터를 넘겨줄 수 없다. 해결책 : 상태 끌어올리기 부모컨텐츠에 App component에 state를 만들어서 전달해준다. 리액트 사이트에서 설명하는 상태 끌어올리기 : https://ko.reactjs.org/tutorial/tutorial.html#lifting-state-up App에 state값을 저장하기 코드를 실행시키면, Form 컴포넌트에 있는 state가 아닌, App 컴포넌트에 있는 state가 변화된걸 볼 수 있다. class Form extends React.Component{ state ={ value:'', } handleChange = e => { const .. 2022. 4. 17. [220413] 데이터(props)가 바뀌면(state) 화면이 바뀐다(component) 한 페이지를 그릴때 , 보여지는 화면에 관련된 모든 컴포넌트를 가져오는 리액트의 습성때문에 기본적인 요청&응답이 길다. 예) 로그인 버튼을 누름 -> 로그인에 관련된 컴포넌트 모두 가져옴. 데이터를 건드리지 않고 화면을 모두 그리고 난 후에는 완료되었다는 신호를 준다. ComponentDidMount라는 신호 (DOMContentLoad와 목적이 같음) 여기부터 비동기통신인 AXIOS를 사용해서 비동기적 통신으로 데이터와 접속함. 리액트는 NODEJS와 webpack의 도움을 받아서 이루어진다. webpack : 100개의 서로다른 js를 1개의 js로 통합시켜주는 번역기 ( = 번들파일) 왜? -> 다른 js 파일을 만들다보면 변수명이 겹치게 되는데 그런 일을 방지해줌. 등장배경 -> require이 .. 2022. 4. 15. 이전 1 다음
