React (15) 썸네일형 리스트형 Tours (useEffect를 사용해서 데이터 fetch 해보기) 이번 프로젝트는 간단했지만 기본적인 리액트 기능을 다시 복습하기에 좋았다. 가령, useEffect를 사용해서 컴포넌트를 마운트 할 때 데이터를 받아온다든가, props를 destructure해서 자식의 자식 컴포넌트에게까지 전달한다든가, 손주(;) 컴포넌트에서 할부지 컴포넌트까지😋 상태를 전달한다든가 하는 것들 그리고 filter나 substring 메소드도 오랜만에 본 듯! 우선 전체 코드 👇 App.js import { useState, useEffect } from "react"; import Loading from "./Loading"; import Tours from "./Tours"; const url = "https://course-api.com/react-tours-project"; fu.. 간단하게 showMore/showLess 토글 만들기 const Tour = ({ info }) => { const [readMore, setReadMore] = useState(false); return ( {readMore ? info : `${info.substring(0, 200)}...`} setReadMore(!readMore)}> {readMore ? "show less" : "show more"} ); }; 1. readMore이라는 state를 만든다. 2. readMore가 true일 때는 info 내용 전부를 보여주고 false일 때는 0부터 199번째까지 부분 문자열을 보여준다. 참고) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String.. Birthday Reminder (useState - Array 사용 기본) 이 포스팅은 Udemy에 올라온 John Smilga의 " React Tutorial and Projects Course" 강의에서 도움을 받았습니다. 강의 속 프로젝트들을 먼저 만들어 본 후에 강의를 듣고 새로 배운 내용이나 실수들을 메모한 것입니다. https://www.udemy.com/course/react-tutorial-and-projects-course/ React Tutorial and Projects Course Step by Step Learn React.js and Create Interesting Projects www.udemy.com useState를 이용한 가장 기본 프로젝트. state에 obejets를 담은 Array가 들어가는 경우. data.js export defaul.. 웹팩이란 무엇인가 보호되어 있는 글입니다. 노드 패키지 매니저란 무엇인가 보호되어 있는 글입니다. VirtualDOM - 게임 엔진 원리를 도입한 개발자들 보호되어 있는 글입니다. 불필요한 http request를 잡아랏! (feat. Component Life Cycle) ✔ 현재 상황 Blog 컴포넌트가 mount 되면 componentDidMount에서 http request를 보낸다. -> 받아온 data를 state에 넣어준다. -> state에서 data를 가져와 map 메소드를 이용해 Post 컴포넌트들을 만들어준다. Blog.js import React, { Component, Fragment } from "react"; import Post from "../Post/Post"; import FullPost from "../../containers/FullPost/FullPost"; import axios from "axios"; import "./Blog.css"; class Blog extends Component { state = { error: fals.. react-router-dom (8) 부가기능 NavLink NavLink - Link와 비슷 - 현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일 혹은 CSS 클래스를 적용할 수 있는 컴포넌트 NavLink에서 링크가 활성화 되었을 때, 스타일을 적용할 때는 activeStyle 값을 CSS 클래스를 적용할 때는 activeClassName 값을 props로 넣어 주면 된다. Profiles에서 사용하고 있는 컴포넌트에서 Link 대신 NavLink를 사용 현재 선택되어 있는 경우 검정색 배경에 흰색 글씨 적용 Profiles.js import React from "react"; import { NavLink, Route } from "react-router-dom"; import Profile from "./Profile"; const Pro.. 이전 1 2 다음
