☁️충북대 구름톤 유니브 4기 스터디 일부 내용 React를 사용하다 보면 로그인 정보, 다크 모드 같은 테마, 언어 설정처럼 여러 컴포넌트에서 공통으로 사용하는 데이터가 생깁니다. 이런 데이터는 매번 props로 넘겨주기보다는, Context API를 활용해서 컴포넌트 트리 전체에 쉽게 전달할 수 있어요.이번 글에서는 Context API의 기본 개념부터 사용법, 주의할 점까지 하나씩 정리해보도록 하겠습니다.1. Context란 무엇인가요?Context는 컴포넌트 트리를 통해 데이터(상태)를 전역적으로 공유할 수 있게 해주는 React의 기능입니다.기본적으로 props를 일일이 전달하지 않아도, 트리 하위에 있는 모든 컴포넌트가 원하는 데이터를 사용할 수 있게 해줍니다.예를 들어 로그인 상태, UI 테..

☁️충북대 구름톤 유니브 4기1. React의 Form1.1 Controlled Components값이 React의 state에 의해 제어되는 폼 요소를 말합니다. 1.1.1 예시// input 태그// textarea 태그// select 태그 사과 바나나 포도 수박1.2 textarea 태그긴 텍스트 입력을 받기 위한 태그입니다.import React, { useState } from 'react';function RequestForm() { const [value, setValue] = useState('요청사항을 입력하세요.'); const handleChange = (event) => { setValue(event.target.value); }; const handleSubm..

React에서 함수형 컴포넌트를 사용할 때 상태 관리와 생명주기 관리가 필요하다면? 바로 Hook을 사용해야 합니다.이 글에서는 가장 기본이자 필수인 Hook인 useState와 useEffect의 개념과 사용법, 그리고 주의할 점까지 정리해보겠습니다.1. useState()컴포넌트에서 상태(state)를 관리하기 위한 Hook✅ 기본 문법const [변수명, set함수명] = useState(초기값);💡 예시import React, { useState } from "react";function Counter() { const [count, setCount] = useState(0); return ( 총 {count}번 클릭했습니다. setCount(count + 1)}>..

* 충북대 구름톤 유니브 FE스터디 필기노트REACT란?Javascript UI 라이브러리라이브러리이기 때문에 제어 권한이 사용자에게 있다.장점virtual DOM 을 사용 → 빠른 업데이트 & 렌더링 속도 *DOM (Document object model) : 웹 페이지를 정의하는 하나의 객체component-based → 재사용성 (Reusability)개발 속도 ⬆️유지 보수 용이활발한 커뮤니티React native → 앱 개발도 가능단점방대한 학습량버전 업데이트 → 뭔가 계속 바뀜… 개발자의 숙명임높은 상태관리 복잡도리액트 연동하는 법1. 일반 방법1. 기존 html에 dom container 추가 (Root DOM node)2. 리액트 가져오기3. 리액트 컴포넌트 가져오기 ..