뇌 채우기 공간

최소단위 컴포넌트 만들기 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컴..

리액트가 만들어진 배경 리액트가 뭐냐?! 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, AIP통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야한다. JavaScript DOM을 변형시키기 위해서 브라우저의 DOM Selector API를 사용해서 특정 DOM을 선택한 뒤 특정 이벤트가 발생하면 변화를 주도록 설정한다. 인터렉션이 자주 발생하면 규칙이 다양하고 관리도 힘들다. Ember,Backbone,AngularJS 프레임워크 자바스트립트의 특정 값이 바뀌면 특정 DOM의 속성이 바..

로드가 되었는지 안되었는지 로드를 바꿔주는 액션 만들어서 단어 추가와 단어 삭제 시에도 스피너가 나오게 해보자! 2021.06.30 - [WEB/REACT] - [REACT] Material UI를 설치하고 로딩하기 전에 스피너화면 보여주기 (1) 리덕스에서 액션만들기 (2) 기본 변수 설정 (3) 액션 생성함수 (4) 리듀서 (5) 파이어베이스와 통신하는 곳에서 단어를 추가하기 전에는 isLoaded를 false로 설정하고 add한 후 then에서 isLoaded를 true로 설정 words.js 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626..

https://material-ui.com/ Material-UI: A popular React UI framework React components for faster and easier web development. Build your own design system, or start with Material Design. material-ui.com 1. 패키지 설치 yarn add @material-ui/core @material-ui/icons 2. Spinner만들기 Spinner.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 import React from "react"; import styled from "s..