내가 알아가는 내용을 같이 공유하는 공간

안녕하세요. 오늘은 리액트 차트에 대해 알아볼게요. React에서 그래프나 차트를 시각화할 때 주로 사용되는 라이브러리는 Chart.js(react-chartjs-2)와 Recharts 가 있어요. 두 라이브러리는 렌더링 방식이 다르기 때문에, 프로젝트 성격에 따라 선택하는 것이 중요해요. Chart.js + react-chartjs-2 VS Recharts Chart.js + react-chartjs-2는 Canvas 기반으로 렌더링 되어 웹 브라우저에 직접 픽셀을 그리는 방식으로 애니메이션이 화려하고 고성능이며, 대량 데이터 처리에 상대적으로 강해요. 다양한 차트 타입 지원(막대형, 라인, 도넛, 레이더 등) + 플러그인 시스템이 잘 갖춰져 있고, 이미지로 내보내기 쉬워요. Rechar..

안녕하세요. 오늘은 리액트의 이벤트 핸들러에 대해 알아볼게요. 이벤트 핸들러 (Event Handler) 이벤트 핸들러는 사용자가 웹 페이지와 상호작용할 때(클릭, 입력, 제출 등) 실행되는 함수(Function) 에요.즉, React에서 사용자의 행동에 따라 특정 동작을 수행하도록 연결하는 역할을 해요. 이벤트 등록 방법 1. 함수 이름 전달 버튼 클릭 시 특정 함수가 실행되도록 함수 이름을 전달해요.클릭해주세요 2. 익명 함수 사용 이벤트에 직접 함수를 정의할 수도 있어요. console.log('버튼 클릭!')}>클릭 이벤트 핸들러 전달 (부모 → 자식) React에서는 부모 컴포넌트가 이벤트 로직을 정의하고, 자식 컴포넌트는 해당 함수를 props로 전달받아 실행할 수 있어요..

안녕하세요. 오늘은 리액트 렌더링에 대해 알아볼게요. 렌더링(Rendering) 렌더링은 우리가 작성한 코드(JSX/TSX)를 실제로 브라우저 화면(UI)에 출력하는 과정이에요. React는 코드의 상태(state)나 속성(props)이 변경되면 전체 화면을 다시 그리는 대신, 변경된 부분만 효율적으로 다시 렌더링 해요. 이러한 방식 덕분에 React는 빠르고 효율적인 UI 업데이트가 가능해요. 조건부 렌더링(Conditional Rendering) 조건부 렌더링은 특정 조건에 따라 UI를 다르게 보여주는 것을 의미해요. React에서는 여러 가지 방법으로 조건부 렌더링을 구현할 수 있어요. 1. if문 사용 JSX 바깥(return 위)에서 조건문을 사용하여 조건에 맞는 컴포넌트를 선..

안녕하세요. 오늘은 React의 Props에 대해 알아볼게요. Props(Properties) Props(Properties)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 매개체예요. HTML에서 속성을 전달하는 것과 비슷한 개념으로, React에서는 이를 통해 컴포넌트 간의 데이터 흐름을 제어해요. 즉, 부모 → 자식으로만 전달되는 단방향 데이터 흐름(one-way data flow)**을 갖아요.자식 컴포넌트는 props로 전달된 데이터를 읽기만(read-only) 할 수 있고, 직접 수정할 수 없어요. 만약 자식이 부모의 데이터를 변경해야 한다면, 부모가 전달한 콜백 함수를 실행하는 방식으로 제어해야 해요. 기본적인 Props 전달 React에서 컴포넌트는 일반적으로 ..

안녕하세요. 오늘은 리액트 JSX에 대해 알아볼게요. JSX JSX(JavaScript XML)은 자바스크립트 코드 안에서 HTML과 유사한 구조를 작성할 수 있게 해주는 문법 확장이에요. 즉, 리액트에서 UI를 설계할 때 “화면 구조를 직관적으로 코드로 표현하기 위한 문법”이라고 이해하면 돼요. 기존의 React.createElement()를 직접 쓰는 대신,HTML처럼 보이는 문법으로 더 가독성 좋고 직관적인 UI 코드를 작성할 수 있게 해 줘요. JSX 필요성 기존 리액트 코드는 다음처럼 생겼어요. function Hello() { return React.createElement('h1', null, '안녕하세요!');}이 방식은 문법적으로는 정확하지만, HTML 구조를 한눈에 파악하기 어..

안녕하세요. 오늘은 리액트의 컴포넌트에 대해 알아볼게요. 컴포넌트(Component) 리액트의 핵심 철학은 "UI를 독립적인 조각으로 나눠서 관리한다."에요. 그 독립적인 조각이 바로 컴포넌트예요. 하나의 컴포넌트는 화면(UI)의 한 부분을 담당하고, 여러 컴포넌트를 조합해 하나의 완성된 페이지를 만들어요. 컴포넌트의 필요성 일반적인 HTML, JS 코드에서는 다음과 같은 문제가 있어요. 특정 UI를 반복해서 사용할 때 같은 코드를 여러 번 작성해야 하고, UI를 수정하면 모든 관련 파일을 수정해야 해요. 그리고 화면이 복잡해질수록 코드 관리가 어려워요. 리액트 컴포넌트는 이런 문제를 해결해요. 컴포넌트의 구조 (JSX 없이 표현) 리액트 컴포넌트는 일반적인 자바스크립트 함수 형태예요. JS..

안녕하세요. 오늘은 리액트(React)에 대해 알아볼게요. 리액트(React) 리액트는 사용자 인터페이스(UI)를 효율적으로 구축하기 위한 자바스크립트 라이브러리예요. 즉, 웹 애플리케이션의 화면(View)을 관리하는 데 초점을 맞춘 도구예요. 우리가 기존에 HTML, CSS, JS(또는 TS)를 각각 따로 사용했다면,React는 이들을 컴포넌트 단위로 통합하여 개발자가 UI를 더 구조적이고 직관적으로 관리할 수 있도록 도와줘요. 프레임워크(Framework)와 라이브러리(Library)의 차이 React를 이해할 때 자주 나오는 개념이 바로 “라이브러리 vs 프레임워크” 에요. 둘 다 개발을 돕는 도구이지만, 제어의 주체가 달라요. 다음 표로 비교해 볼게요.구분프레임워크라이브러리제어의 주체프..

안녕하세요. 오늘은 리액트(React) 적용방법을 알아볼게요. 리액트(React) 적용방법 우선 리액트를 적용하고자 하는 프로그램 터미널을 실행시킨 후 "npm create vite@lastest 폴더이름"을 작성하고 실행시켜요. 폴더이름은 여러분들이 원하는 폴더명을 작성하시면 좋아요. 그리고 실행 확인 알림 메세지가 출력되는데요. y작성 후 실행시킵니다. Q) npm create vite@lastest 부분 의미부분의미npmNode.js의 패키지 관리자 (Node Package Manager)create vite@latestvite 프로젝트 생성 도구(create-vite)의 최신 버전(@latest)을 실행새로 만들 프로젝트(폴더)의 이름 다음 Select a framwork가 리스트..