전체 글
-
#3-4 불변성과 리듀서 여러개 합치기React로 nodebirdSNS 만들기 (인프런)/#3 리덕스 익히기 2020. 1. 8. 13:01
...state를 쓴 이유는 불변성 때문이다. state는 어떠한 이유에서든 절대 변해서는 안된다. 리액트에선 setState를 사용했음 - front폴더->reducers폴더->index.js - user.js, post.js파일에있는 reducers들을 하나로 합친것 (중앙통제시스템) import { combineReducers } from "redux"; import user from "./user"; import post from "./post"; const rootReducer = combineReducers({ user, post }); export default rootReducer; - user.js // store (state) export const initialState = { isL..
-
-
#3-1 Redux 주요 개념 소개React로 nodebirdSNS 만들기 (인프런)/#3 리덕스 익히기 2020. 1. 7. 18:37
- 리덕스와 리덕스사가를 통해 state를 관리할 것임 - 리덕스란? - 하나의 큰 통제실을 두고, 여러 컴포넌트들에게 state를 배분하는것 - Redux(state) -> React의 state는 쓰지 않아도 됨 *(But, 리덕스의 state를 관리하기가 번거로워서 간단한 작업엔 React의 state를 사용하고, 복잡한 작업일 경우 리덕스의 state를 사용한다.) - 리덕스는 안전성과 state 통제에 용이 하다. 리덕스 간단 개념 설명서 - Action -> state를 바꾸는 행동,리액트는 setState로 state를 변경했음 ex)로그인 액션 - Dispatch -> Action을 실행 ex)로그인 액션 dispatch ( 액션을 디스페치 해야만 함, 한 몸이라고 생각) - Reducer..
-
#2-7 컴포넌트 분리하기React로 nodebirdSNS 만들기 (인프런)/#2 SNS 화면 만들기 2020. 1. 7. 18:16
- 반복문 조건문 form 등이 쓰인 코드들을 컴포넌트로 많이 분리함 - index.js import React from "react"; import PostForm from "../components/PostForm"; import PostCard from "../components/PostCard"; // index.js는 타임라인 역할 const dummy = { isLoggedIn: true, imagePaths: [], mainPosts: [ { User: { id: 1, nickname: "정중식" }, content: "첫 번째 게시글", img: "https://img.hankyung.com/photo/201807/03.17342954.1.jpg" } ] }; const Home = () ..
-
#2-5 메인 화면 만들기React로 nodebirdSNS 만들기 (인프런)/#2 SNS 화면 만들기 2020. 1. 7. 16:18
- index.js import React from "react"; import { Form, Input, Button, Card, Avatar, Icon } from "antd"; // index.js는 타임라인 역할 const dummy = { isLoggedIn: true, imagePaths: [], mainPosts: [ { User: { id: 1, nickname: "정중식" }, content: "첫 번째 게시글", img: "https://img.hankyung.com/photo/201807/03.17342954.1.jpg" } ] }; const Home = () => { return ( {dummy.isLoggedIn && ( 이미지 업로드 짹짹 {dummy.imagePaths.map..
-
#2-4 커스텀 훅 재사용 및 홈 화면 설정,useCallbackReact로 nodebirdSNS 만들기 (인프런)/#2 SNS 화면 만들기 2020. 1. 7. 12:39
쪼개기 - 리액트는 한 페이지에서 모든걸 다 만들면 여러 컴포넌트가 리랜더링 되기때문에 별도의 컴포넌트로 나눠주는게좋다. (*쪼개면 부모컴포넌트, 자식컴포넌트로 나눠지기때문에 관리에 약간의 어려움이 있는건 사실.*) - components폴더-> LoginForm.js import React, { useState, useCallback } from "react"; import Link from "next/link"; import { Form, Input, Button } from "antd"; import { useInput } from "../pages/signup"; // useCallback으로 감싸는 함수기준은 자식 컴포넌트에 넘겨주는 함수는 무조건 감싸준다고 보면됨 const LoginForm ..
-
#2-3 antd 그리드 시스템카테고리 없음 2020. 1. 6. 18:56
- xs:모바일 , sm: 작은 화면, md: 중간 화면 , lg: 큰 화면 - Card: 로그인한 회원정보를 이런 컴포넌트로 나타냄 - Avatar: 디자인 - antd 참조 import React, { children } from "react"; import Link from "next/link"; import PropTypes from "prop-types"; import { Menu, Input, Button, Row, Col, Card, Avatar } from "antd"; // 가짜 데이터 const dummy = { nickname: "정중식", Post: [], Following: [], Follower: [] }; const AppLayout = ({ children }) => { re..