뇌 채우기 공간

보호되어 있는 글입니다.

1. Header에서 달을 이동시키자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 import React from "react"; import { Header, Calendar } from '../components'; import moment from "moment"; import styled from "styled-components"; function FullCalendar() { const [calendarYM , setCalendarYM] = React.useState(moment()); const [today , setToday] = React.u..

이런 캘린더를 한번 만들어보자! 1. 프로젝트 생성 yarn create react-app calendar 프로젝트를 생성한다. 2. styled-components , moment 설치 yarn add styled-components yarn add moment 3. 폴더구조 일단 이렇게 만들어줬다. pages -> 한 페이지 components -> 중간 단위의 컴포넌트 elements -> 최소 단위 컴포넌트 4. 최소단위 컴포넌트 일단 text 컴포넌트와 버튼 컴포넌트를 만들어보겠다. Text 컴포넌트 elements/Text.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 import Re..

최소단위 컴포넌트 만들기 1. 컴포넌트를 이루는 요소를 만들자 - Grid 잡기 styled-components 설치 yarn add styled-components Grid잡기 elements 폴더에 만들어준다. (1) props로 받아온 값이 없을때 기본값 설정 (2) styled-component지정 (3) 받아오기 Grid의 props에서부터 is_flex, width, ..등등으로 받아온다. 그리고 그 중 style에 관련된 값을 styles라는 변수에 가져온다. 그리고 GridBox한테 styles내용을 넘겨준다. 그리고 Grid안에 내용들이 보여야하기 때문에 children을 받아온다 코드보기 더보기 import React from "react"; import styled from "styl..

컴포넌트 쪼개기 너무 작게 쪼개면 만들기 힘들고, 너무 크게 쪼개면 재활용이 힘들다. 이 강의에서는 큰 것에서 작은것으로 쪼개기 페이지마다 공통으로 사용하는 부분이 있다. 그것을 컴포넌트로 빼준다. 폴더 구조 잡기 src elements : 최소 단위 컴포넌트 components: 중간 단위 컴포넌트 pages: 가장 큰 단위의 컴포넌트 redux : 리덕스 모듈과 스토어 shared : 공용으로 사용할 코드 . App.js, firebase.js 같은 것 App.js는 shared폴더 아래로 옮겨주고 index.js에서 경로를 바꿔준다. import App from './shared/App'; 1. 페이지 만들기 (1) pages/PostList.js 가장 큰 단위의 페이지. 메인으로 보여줄 페이지인데..

node install 하기 nvm install [node version] nvm use [node version] yarn 설치 npm install -g yarn create-react-app설치 yarn add global creat-react-app CRA로 프로젝트 생성 yarn create react-app image-community Redux devTools React developer Tools

input 상태 관리하기 이렇게 input에다가 값을 넣으면 밑에 바로 값이 뜨고 초기화를 누르면 input안에 있는 값이 없어지도록 해보자 InputSample.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 import React, { useState } from 'react'; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); }; const onReset = () => { setText(''); }; return ( 초기화 값: {text} ); } export defau..

Counter.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {number} +1 -1 ); } export default Counter; cs 이 부분에서 number는 변수명 setNumber는 함수명이다. useState에는 초기값을 넣어준다. 즉 num..

조건부 렌더링 조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다. App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ) } export default App; Colored by Color Scripter cs Hello.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import React from 'react'; function Hello({ color, name, isSpecial }) { return ( { isS..

props 를 통해 컴포넌트에게 값 전달하기 App.js 1 2 3 4 5 6 7 8 9 10 import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; cs Hello.js 1 2 3 4 5 6 7 import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; cs App.js에서 Hello컴포넌트한테 name이라는 변수로 react라는 값을 넘겨준다. 그러면 Hello의 props로 {name: "react"}의 형태로 값이 넘어온다. 그래서 Hello컴..