비동기 프로그래밍과 Promise async await fetch API axios useEffect 내에서 API 호출 시, 주의할 점 useEffect에서 첫번째 인자로 함수를 받는다. useEffect(() => { async function fetchData(){ const result = await axios.get( "https://jsonplacceholder.typicode.com/posts" ); console.log(result); console.log(result.data); return result.data; } fetchData().then((res) => { setDocs(res); }); }, []); 별도로 async 함수를 만들고 그 함수를 호출하는 방식으로 함수를 만들었다..

컴포넌트 반복하기 리액트 코드를 짜다보면 컴포넌트를 반복해서 보여주어야 하는 일이 굉장히 많다. 아래의 예시를 보자. 웹툰마다 같은 디자인의 컴포넌트가 반복해서 보여지고 있다. 그렇다면, 하나의 컴포넌트로 구현할 수 있다. 이러한 컴포넌트를 앞으로 PreviewCard라고 부르겠다. 그렇다면 PreviewCard 컴포넌트를 렌더링하는 부모 컴포넌트의 코드를 잠시 떠올려보자. export default function PreviewCardParent(){ return( ) } 여기서 좀 더 많은 PreviewCard를 보여주자! 라는 요구사항이 발생한다면 어떻게 할 수 있을까? PreviewCard를 하나하나 렌더링 하지 말고, 서버에서 내려주는 정보의 개수만큼 렌더링을 해보자. ➡ Array.protot..

Lifecycle 개념 Lifecycle (생명주기) 여기에 Clock 컴포넌트가 하나 있다. import React, { useState } from "react"; export default function Clock() { const [date, setDate] = useState(new Date()); return ( Hello, world! It is {date.toLocalTimeString()}. ) } 결과는 다음과 같다. 이 컴포넌트가 렌더링 되는 순간의 시간이 화면에 보여지게 된다. 이 말은 즉, 시간이 흘러도 화면의 시간은 멈춰있다. 그래서, 화면에 보여지는 시간을 1초마다 업데이트 해주고 싶다! ➡ 1초 마다 setDate(new Date())를 실행해서 화면을 업데이트 해주자! j..

state가 필요한 이유 함수 컴포넌트는 함수이다. 함수 컴포넌트에서 내부적으로 상태를 관리해야 하는 일이 필요하다. 아래 예시 코드를 보자 import React from 'react'; function Counter() { let count = 0; return ( (count += 1)}>+1 Counter: {count} ); } button을 클릭할 때 count 변수의 값이 증가하고 출력하는 컴포넌트이다. 하지만 button을 클릭해도 증가하는 count 변수의 값이 출력되지 않는다. (초기값 0으로 그대로 변하지 않음) = 컴포넌트가 초기에 렌더링을 실행하고 변수의 값이 바뀐 뒤로 렌더링이 되지 않는다. ➡ state가 필요한 이유! useState() hook 컴포넌트가 상태를 관리한다는 ..

JSX 설명 JSX 문법 사용 O JSX 문법 사용 X 두 코드를 비교했을 때, JSX 문법을 사용한 코드가 가독성이 훨씬 좋다. JSX 공식 문서 링크 : https://ko.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org const element = Hello, world!; 위에 희한한 태그 문법은 문자열도, HTML도 아니다. JSX라 하며 JavaScript를 확장한 문법이다. JSX는 React “엘리먼트(element)” 를 생성한다. JSX란? 더보기 React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시..

HTML, CSS JavaScript 프로젝트에 리액트를 추가하는 방법 웹사이트에 React 추가 React는 처음부터 점진적으로 도입할 수 있게 설계되었다. 그래서 React는 필요한 만큼만 사용하면 된다. 아마 기존 페이지에 "상호작용'이라는 조미료를 첨가하기만 하고 싶을 수도 있다. 이럴 때 React 컴포넌트를 쓰면 좋다. 오늘날 웹사이트의 대부분은 싱글 페이지가 아니고 그래야 할 필요도 없다. 빌드 도구 없이 몇 줄의 코드만으로 웹 사이트의 작은 부분에 먼저 React를 도입해보아라. React의 비중을 천천히 늘릴 수도 있고 아니면 동적인 위젯을 몇 개 추가하는 것으로 끝낼 수도 있다. react 공식 문서 링크 : https://ko.reactjs.org/docs/add-react-to-a-..

리액트의 모듈화 아이디어 React는 무엇이고, 사람들은 왜 쓸까? React가 어떤 문제를 해결해주는지 이해해 보자. 지금까지 웹사이트를 만들기 위해 배웠던 방식들 1.index.html에서 style.css와 script.js 파일을 불러오기 2. index.html에 태그와 태그로 css, javascript 코드를 바로 작성하기 하지만 우리가 실제로 만들어야 하는 웹사이트는 이렇게 간단하지 않다. 구현해야 하는 기능이 많아져서 JavaScript가 복잡해지면 하나의 script.js파일 안에 모든 코드를 넣기가 힘들어 진다. ex) 이 script 코드가 어떤 element를 제어하고 있는지 잘 파악하기 힘들고, 가독성도 안 좋아짐 ex) 변수 선언 시 겹치지 않도록 계속 신경써줘야 함 ➡ 여러 ..