React

매 번 헷갈리는 멍청이라 적어본다.. import React from 'react'; import Todo from '../Todo/Todo'; const TodoList = () => { return ( ); }; export default TodoList; Todo라는 컴포넌트가 가지고 있는 todo, handleUpdate, handleDelete라는 prop들에 TodoList 컴포넌트가 가지고 있는 값들을 넘겨주기 위해서는 "="을 사용한다. 이는 하나의 객체({}) 형태로 Todo라는 컴포넌트의 첫 번째 파라미터로 전달된다. 즉, Todo 컴포넌트는 {todo : todo, handleUpdate: handleUpdate, handleDelete : handleDelete}라는 객체를 파라미터..

import { useQuery } from "@tanstack/react-query"; import Post from "./Post"; import styles from "./PostList.module.css"; import { getPosts } from "../api"; function PostList() { const { data: postsData } = useQuery({ queryKey: ["posts"], queryFn: getPosts, }); const posts = postsData?.results ?? []; return ( {posts.map((post) => ( ))} ); } export default PostList; import Card from './Card'; impo..

import React, { useState, useEffect } from "react"; export default function App() { const [counter, setCounter] = useState(0); console.log("useEffect 이전에 적힌 코드"); function handleClick() { setCounter((prev) => prev + 1); } useEffect(() => { function addMouseEvent() { console.log("counter", counter); } console.log("useEffect 내부"); window.addEventListener("click", addMouseEvent); // 클린업 함수 return (..

useMemo 비용이 큰 연산 결과를 저장하고, 이 저장된 값을 반환하는 훅 첫 인수로는 어떤 값을 반환하는 생성함수, 두 번째 인수로는 해당함수가 의존하는 값의 배열을 전달 렌더링 시 의존성 배열의 값이 변경되지 않았으면, 함수를 재 실행하지 않고 기억해둔 해당 값을 반환 의존성 배열의 값이 변경되었다면, 첫 인수의 함수를 실행하고 그 값을 반환한 다음 또 그 값을 기억 메모이제이션은 값 뿐만 아니라 함수도 가능 물론 컴포넌트도 useMemo로 감쌀 수 있지만, React.memo를 쓰는 것이 현명 useCallback useMemo가 값을 기억했다면, useCallback은 인수로 넘겨받은 콜백 자체를 기억 새로 특정함수를 만들지 않고, 재 사용한다는 말 첫 번쨰 인수로 함수를 두 번째 인수로 의존성..

function ReviewForm() { const [isSubmitting, setIsSubmitting] = useState(false); const [submittingError, setSubmittingError] = useState(null); 먼저 로딩과 에러를 처리하기 위한 state를 만들어준다. 리뷰를 제출 중일 때도 제출하기 버튼을 누를 수 있게 된다면 같은 요청을 여러 번 보내게 된다. 이를 방지하기 위해 로딩 중일 때는 확인(제출) 버튼을 클릭하지 못하게 만드려고 한다. const handleSubmit = async (e) => { e.preventDefault(); const formData = new FormData(); formData.append("title", value..

1. 사이드 이펙트(Side Effect)란? 사이드 이펙트는 한국어로는 '부작용'이라는 뜻이다. 일상생활에서는 '약의 부작용'처럼 사용하는 단어다. 예를 들면 감기약을 먹었을 때 감기 증상은 없어졌지만 (작용) 피부가 붉게 올라오면 (부작용) 이 약에는 부작용이 있다고 할 수 있다. 일상생활에서는 주로 안 좋은 것들을 부작용이라고 부르지만 프로그래밍에서는 말 그대로 외부에 부수적인 작용을 하는 걸 말한다. 어떤 것인지 간단한 자바스크립트 함수를 예시로 알아보자. let count = 0; function add(a, b) { const result = a + b; count += 1; // 함수 외부의 값을 변경 return result; } const val1 = add(1, 2); const va..

DOM 노드를 참조할 때 useRef 함수로 Ref 객체를 만들고 이것의 current 라는 프로퍼티를 활용한다. Ref 객체 생성 import { useRef } from 'react'; // ... const ref = useRef(); useRef 함수로 Ref 객체를 만들 수 있다. ref Prop 사용하기 const ref = useRef(); // ... ... ref Prop에다가 앞에서 만든 Ref 객체를 내려주면 된다. Ref 객체에서 DOM 노드 참조하기 const node = ref.current; if (node) { // node 를 사용하는 코드 } Ref 객체의 current 라는 프로퍼티를 사용하면 DOM 노드를 참조할 수 있다. current 값은 없을 수도 있으니까 반드시..

HTML과 다른 점 1) onChange 리액트에선 순수 HTML과 다르게 onChange Prop을 사용하면 입력 값이 바뀔 때마다 핸들러 함수를 실행한다. html의 oninput 이벤트와 같다고 생각하면 된다. 리액트 개발자들은 주로 onChange 라는 Prop을 사용한다. 2) htmlFor 태그에서 사용하는 속성인 for는 자바스크립트 반복문 키워드인 for와 겹치기 때문에 리액트에서는 htmlFor 를 사용한다. 폼을 다루는 기본적인 방법 스테이트를 만들고 target.value 값을 사용해서 값을 변경해 줄 수 있다. 이때 value Prop으로 스테이트 값을 내려주고, onChange Prop으로 핸들러 함수를 넘겨줬다. function TripSearchForm() { const [l..

디자인을 적용하는 방법 1) 이미지 불러오기 이미지 파일은 import 구문을 통해 불러오고, 불러온 이미지 주소를 src 속성으로 사용하면 된다. import diceImg from './assets/dice.png'; function Dice() { return ; } export default App; 2) 인라인 스타일 리액트에서 인라인 스타일은 문자열이 아닌 객체형으로 사용한다. 프로퍼티 이름은 CSS 속성 이름으로, 프로퍼티 값은 CSS 속성 값으로 쓴다. 이때 프로퍼티 이름은 아래의 boarderRadius 처럼 대시 기호 없이 카멜 케이스로 써야 한다. import diceImg from './assets/dice.png'; const style = { borderRadius: '50%',..

State state는 리액트에서 화면을 그려내는 데 굉장히 중요한 역할을 한다. State라는 단어는 한국어로 '상태'라는 뜻이다. 리액트에서의 state도 그 의미가 다르지 않다. 상태(state)가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작한다. 리액트에서 state를 만들고, state를 바꾸기 위해서는 일단 useState라는 함수를 활용해야 한다. import { useState } from 'react'; // ... const [num, setNum] = useState(1); // ... 보통 이렇게 Destructuring 문법으로 작성한다. useState 함수가 초깃값을 아규먼트로 받고 그에 따른 실행 결과로 요소 2개를 가진 배열의 형태로 리턴을 하기 때문이다. 이때 첫 번..

Props JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있다. 리액트에서 이렇게 컴포넌트에 지정한 속성들을 Props라고 부른다. Props는 Properties의 약자다. 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달된다. App.js import Dice from './Dice'; function App() { return ( ); } export default App; Dice.js import diceBlue01 from './assets/dice-blue-1.svg'; function Dice(props) { console.log(props) return ; } export default Dice; 위 코드들..

리액트 엘리먼트 JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 된다. import ReactDOM from 'react-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); const element = 안녕 리액트!; console.log(element); root.render(element); {$$typeof: Symbol(react.element), type: "h1", key: null, ref: null, props: {…}, …} JSX 코드를 담고있는 변수 element를 출력해보면 객체로 나온다. 이런 객체를 리액트 엘리먼트라고 부른다. 이 리액트 엘리먼트를 render 함수의 아규먼트로 전달하게 되..