React로 nodebirdSNS 만들기 (인프런)/#2 SNS 화면 만들기
-
#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-1 _app.js로 레이아웃 분리하기React로 nodebirdSNS 만들기 (인프런)/#2 SNS 화면 만들기 2020. 1. 6. 17:45
useCallback 은 useMemo와 상당히 비슷한 함수입니다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용하는데요, 이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성 할 수 있습니다. 우리가 방금 구현한 Average 컴포넌트를 보면, onChange 와 onInsert 라는 함수를 선언해주었습니다. 이렇게 선언을 하게 되면 컴포넌트가 리렌더링 될 때마다 이 함수들이 새로 생성됩니다. 대부분의 경우에는 이러한 방식이 문제가 되지 않지만, 컴포넌트의 렌더링이 자주 발생하거나, 렌더링 해야 할 컴포넌트의 개수가 많아진다면 이 부분을 최적화 해주시는 것이 좋습니다. Hoock => import React, { useState, useCallback } from "react"; const..