React Context로 전역 데이터 관리를 해보자!

리액트로 개발을 할 때 컴포넌트간의 데이터 전달은 props를 통해 이루어지게 됩니다. 하지만 최상위 컴포넌트부터 최하위 컴포넌트까지 데이터를 넘겨야 하는 경우 props를 사용하게 되면 어떻게 될까요? 컴포넌트 트리 내 존재하는 모든 하위 컴포넌트에 props를 추가하여 넘겨주어야 하는 번거로운 상황(Prop Drilling)이 생기게 됩니다. 오늘은 이런 불편함을 없애주기 위해 전역 데이터를 관리하는 방법인 리액트 컨텍스트(React Context)에 대해 알아보도록 하겠습니다.  🤔 React Context를 사용하지 않는 경우리액트 컨텍스트를 사용하지 않을 때 일어나는 Prop Drilling의 예시를 다음과 같이 생각해 볼 수 있습니다.function App() { const [usernam..

• format_list_bulleted 프론트엔드
• · 2025. 1. 31.
• textsms

[React/Chart.js] RadarChart에서 label size 및 weight 조절하기

Chart.js를 사용해서 RadarChart를 만들 때, Label 텍스트 사이즈 및 굵기를 조절하는 방법입니다. const options = { ... scales: { r: { pointLabels: { font: { size: 16, weight: "bold" as const, }, }, }, }, ...} 처음에는font: { size: 16, weight: "bold",} 이렇게 사용하였는데, options 부분에서 에러가 발생하였습니다.  타입스크립트 자체에서 `weight: bold` 부분이, 문자열이기 때문에 다른 값으로 바뀔 수 있다고 판단하여 오류가 납니다. 따라서 `as const`를..

• format_list_bulleted 프론트엔드
• · 2024. 9. 27.
• textsms