리액트에서 export란? 리액트로 무언가를 개발할 때, 컴포넌트 단위로 나누어서 하나의 페이지를 구성하게 된다. 따라서, 부모 컴포넌트에 여러 개의 자식 컴포넌트들을 import 하는 상황이 생기게 되는데, import 하기 위해서는 자식 컴포넌트를 export 해줘야 한다. 요약하자면, export는 컴포넌트의 재사용을 위해 import 되기 위한 권한 설정이라고 할 수 있다. export의 종류 default export const List = () => { return } export default List; 우리가 일반적으로 가장 많이 쓰는 export 방식으로 파일 안에 하나의 함수만 있을 때 쓰이는 기본적인 방식이다. default 방식은 기본 이름을 사용하는 방식으로 함수 이름인 List를..

성능 최적화란? 함수형 컴포넌트를 사용하는 리액트의 특성상 컴포넌트의 상태가 바뀌거나, 전달받은 Props가 업데이트되거나, 자식 컴포넌트일 때 부모 컴포넌트가 렌더링 되는 경우 컴포넌트가 리렌더링 되는 현상이 발생한다. (컴포넌트가 리렌더링 되면 그 안에 있는 함수, 변수, 컴포넌트 모두 재생성되게 된다.) 안에 들어 있는 정보가 바뀌었으니 새로 렌더링이 되는 것은 어찌 보면 당연한 현상이다. 하지만, 관점을 바꿔 생각해 보면 하나의 컴포넌트 안에 무수한 상태, 변수들과 전달받은 다양한 Props들이 있을 텐데 수많은 요소 중에서 하나 바뀌었다고 전체가 리렌더링 되는 것은 정말 비효율적인 것이다. (한 명이 잘못했다고 모두가 손들어야 하는 건 아니다.) 따라서, 우리는 컴포넌트가 렌더링 될 때 굳이 같..

문제 우리가 웹에 이미지를 넣을 때, 이런 식으로 이미지 태그를 사용하는 게 일반적이다. 하지만, 리액트에서는 간혹 상대 경로로 이미지를 불러올 때 이미지가 불러와지지 않는 문제가 생길 수 있다. 이럴 때는 절대경로를 이용해서 이미지를 쉽게 넣어주면 해결이 가능하다. 방법 const Home = () => { return } export default Home; process.env.PUBLIC_URL은 리액트의 public 폴더의 절대 경로를 잡아주는 역할을 한다. '+' 뒤로 public 폴더의 경로를 입력하기만 하면 해당 이미지의 절대 경로를 이용해서 쉽게 이미지를 불러올 수 있다. (한 가지 주의할 점은 불러오는 이미지의 경로가 반드시 public 폴더 안에 존재해야 한다는 점이다.) 응용 con..

준비 const App = () => { return } const Home = () => { return } 우선 이 글에서 다룰 목표는 컴포넌트끼리 데이터를 주고받는 과정에서, 그 데이터를 특정 기준에 맞춰서 정렬시키는 기능을 구현하는 것이다. 그 전에 이 프로젝트가 어떤 식으로 컴포넌트가 구성되는지 알 필요가 있다. 가장 큰 App 컴포넌트 안에 Home이라는 컴포넌트가 있고 그 안에 정렬 컴포넌트인 SortMenu와 정렬된 리스트를 출력할 DataList 컴포넌트가 구성되어 있다. (DataList 컴포넌트는 map() 함수를 통해 출력할 예정이다.) 방법 더미(dummy) 데이터 만들기 import { useState } from 'react'; import Home from './Home'; ..

문제 const MyButton = () => { return ( ) } export default MyButton; MyButton이라는 하나의 컴포넌트가 있다. 이 컴포넌트의 용도는 사이트 여기저기에서 버튼 역할을 수행하고자 한다. 버튼도 버튼마다 역할이 있고, 기능이 다르기 때문에 컴포넌트도 이에 따라 여러 개 만들어야 한다고 생각할 것이다. 하지만, 리액트에는 Props라는 혜자 기능이 있기 때문에 1개의 컴포넌트로 씹고 뜯고 맛보며 제대로 뽕을 뽑을 수 있다. 또한 CSS 스타일링 역시 각각 버튼의 기능마다 다르게 줄 수 있다. 바로 Props를 이용해서 말이다. 해결 import {MyButton} from "./Components/MyButton"; const Home = () => { re..