helpers와 utils 차이점처음 리액트로 프로젝트를 만들어보면서 모든 로직을 하나의 컴포넌트에 처리하는 멋진 개발을 했다!그러다 코드가 복잡해져서 여러 컴포넌트로 분리해야겠다는 생각에 리액트 프로젝트 구조를 좀 찾아보았다.다양한 글이 구조를 설명하지만 딱 정해진 구조는 없고 애플리케이션에 맞게 유동적으로 가져가면 되는 거 같았다.그중에서 helpers와 utils 디렉터리의 구분이 명확하게 이해되지 않았다. 좀 더 찾아보다가 나에게 가장 와닿는 설명을 해주는 블로그 글과 깃헙 이슈를 찾았다. helpers 폴더 정의 참고 블로그여러 블로그 글을 읽어보면서 helpers 폴더에 대해서 읽어봤지만 위 블로그의 설명이 나에게 가장 와닿았다. 해당 블로그에서는 특정 데이터를 가져오거나 특별한 작업을 수행하..
이번에 진행 중인 프로젝트에서 로그인 여부에 따라서 다르게 렌더링 해야 하는 컴포넌트가 늘어갔다.로그인 여부를 전달하기 위해서 내가 선택한 방법은 최상단 컴포넌트에서 토큰을 확인해서 변수에 담아두는 방식이었다. 그리고 이 값이 필요한 자식 컴포넌트의 props 값으로 로그인 여부를 전달했다.이러한 경우에는 A 컴포넌트는 로그인 여부 값이 필요하지 않지만 A 컴포넌트의 자식인 B 컴포넌트에는 그 값이 필요하기 때문에 A 컴포넌트도 로그인 여부 값을 가지고 있어야 한다. 컴포넌트 depth가 깊어 지거나 하면 관리가 복잡해지는 구조를 가지게 될 것이다. 그러다 React의 Context API를 알게되었다. context를 사용하면 데이터를 전역으로 관리하고 사용할 수 있다. const App = () =>..
![]()
이전 글(2022.03.30 - [Programming/React] - 컴포넌트로 반복 작업 줄이기!!)에서 반복적인 html을 리액트의 컴포넌트를 통해서 간편화 하는 방법을 알아보았다. 하지만 3개의 연락처를 보여주기 위해서 Contact 컴포넌트를 3번 만드는 작업도 역시나 반복적이다. 그러면 어쩐단 말이야! 이번에는 map()을 이용해서 반복되는 코드를 확 줄여보자! ReactDOM.render( 연락처 , document.getElementById("root") ); 위 코드는 지난번에 작성했던 3개의 연락처를 뿌려주는 코드이다. 같은 결과물을 만드는 거지만 컴포넌트와 map()를 이용하면 아래와 같이 상당히 간단하게 결과물을 만들 수 있다.!!!! import React from "react";..
