React/TIL (6) 썸네일형 리스트형 간단하게 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.. 웹팩이란 무엇인가 보호되어 있는 글입니다. 노드 패키지 매니저란 무엇인가 보호되어 있는 글입니다. 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.. useEffect에서 async/await 사용하고 싶다면? 컴포넌트가 화면에 보이는 시점에 API 요청하고 싶다면 useEffect를 사용 (컴포넌트가 처음 렌더링 되는 시점에 API 요청) 여기서 주의할 점 useEffect에 등록하는 함수에 async를 붙이면 안된다!!!! 왜냐하면, useEffect에서 반환해야 하는 값은 뒷정리 함수이기 때문 useEffect 내부에서 async/await를 사용하고 싶다면 함수 내부에 async 키워드가 붙은 또 다른 함수를 만들어서 사용해야 한다! const NewsList = () => { const [articles, setArticles] = useState(null); const [loading, setLoading] = useState(false); useEffect(() => { //async를 사용하는 함.. 이전 1 다음
