REturn 0;

해커톤 프로젝트를 진행하면서 역할을 분담해서 했더니 팀 프로젝트 코드인데 내가 모르는 코드가 몇개 있는 것 같아서 공부해서 이해하고 넘어가야된다는 생각이 들었다. + 게시글에는 보통 이미지를 첨부할 수 있게 하기 때문에 알아두면 좋겠다는 생각이 들어서 프로젝트에 팀원이 작성한 코드로 공부를 해보았다. const insertImg = (e) => { let reader = new FileReader(); // 업로드 파일 세팅 부분 const file = e.target.files[0]; setUploadedImage(file); // 프리뷰 이미지 세팅 부분 if (e.target.files[0]) { reader.readAsDataURL(e.target.files[0]); } else { setPrev..

import catUrl from "./images/cat.png" // src 폴더 하위의 이미지 경로 import function Thumbnail() { return ; } 보통은 위와 같은 코드로 이미지파일 링크를 통해 import하여 변수에 저장하고 src안에 해당 변수를 링크로 넣는 방식으로 이미지 파일을 불러와서 사용한다. 하지만 이번 프로젝트에 들어가는 이미지가 너무 많아서 매번 import하기가 힘들어 방법을 찾아보았다. 모든 이미지파일을 React 프로젝트 생성하면 자동생성되는 public 폴더 내에 img 폴더를 만들어서 그 안에 이미지 파일을 저장하면 {isMentor ? ( ) : ( )} 이런식으로 ../../로 상위 폴더로 찾으러 갈 필요없이 /img/~~~.png만으로 바로 ..

import { useEffect } from "react"; import { useLocation } from "react-router-dom"; // 페이지 이동 시 스크롤을 맨 위로 export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; } 스크롤을 맨 밑으로 내리고 다른 컴포넌트가 렌더링 되어도 스크롤이 맨 아래인 상태에서 렌더링된다. 위 코드는 새로고침이나 새로운 컴포넌트가 렌더링 됐을 때, 스크롤을 맨 위로 올려주는 함수이다. import ScrollToTop from "./component..

import React, { useState } from "react"; import styled from "styled-components"; const StarRate = ({ onChange }) => { const [rate, setRate] = useState(0); const handleStarClick = (select) => { setRate(select); onChange(select); }; return ( {[1, 2, 3, 4, 5].map((star) => ( ★ ))} ); }; export default StarRate; const StarContainer = styled.div` display: inline-block; `; const Star = styled.span` fo..

import { useState } from "react"; export const useForm = () => { const [value, setValue] = useState(""); const onChange = (e) => { setValue(e.target.value); }; return [value, onChange]; }; 1. useForm() 내장된 useState, useEffect와 같은 hook을 커스텀하여 재사용성을 높이기 위해 사용 2. onChange() 입력된 값을 저장해야되는 input이나 textarea에 onChange함수로 넣어서 입력값의 변경이 이루어질 때마다 함수 실행 입력 요소의 현재값을 매번 value에 저장하는것 3. return [ value, onChang..

const { id } = useParams(); const [data, setData] = useState(); useEffect(() => { const fetchData = async () => { const response = await getChat(id); setData(response.data); }; fetchData(); }, [id]); if (!data) { return null; } 1. useParams() 현재 라우팅된 url에 파라미터 값을 id에 저장 2. useEffect() id 값이 변경될 때마다 해당 id와 일치한 데이터를 getChat(id)함수를 통해 데이터를 전달받는 fetchData함수를 실행 3. if (!data) { return: null; } 위에서 데이..