if(life){code();}

Edit Mode (편집 모드) 구현 Obejct 회전 기능localStorage 저장 기능  회전 기능 추가Overlay.jsx : 회전 아이콘 추가, Edit Mode일 때 동물을 회전할 수 있도록 함EditContext.jsx : rotate 함수를 만들어 선택딘 동물의 방향을 변경할 수 있도록 구현 Overlay.jsxexport const Overlay = () => { const { isEditMode, setEditMode, selectedId, setSelectedId, rotate } = useContext(EditContext); return ( {isEditMode && selectedId ? ( rotate("left")} /..

Edit Mode (편집 모드) 구현 객체 추가 및 이동 기능 구현 (객체 리스트 동적 관리/ 동물 및 공룡을 사용자가 마우스로 선택, 원하는 위치에 배치할 수 있는 기능 구현)오브젝트 컴포넌트에 물리엔진 적용gridHelper 추가하여 편집 모드 시각화 개선UI 크기 조정 상태관리에 데이터 추가Environment 컴포넌트에서 기존에 하드코딩된 동물 제거EditContext.jsx 파일에 데이터를 관리할 objects state생성 후 데이터를 objects state의 초기값으로 넣어줌데이터 구성crypto 객체를 통해 생성된 고유한 uuid동물인지 공룡인지 나타내는 typepositionrotation data 코드조각const data = [ { id: crypto.randomUUID(),..

useContext React의 Context API를 활용해 컴포넌트 트리 전체에서 데이터를 전달하는 방식→ props 없이도 전역적으로 상태를 공유할 수 있음→ 부모 컴포넌트에서 Context의 Provider를 설정하면, 해당 Provider 하위의 모든 컴포넌트에서 데이터 공유 가능 ※ 전역 상태 관리와는 다름Context Provider 내부의 컴포넌트에서만 상태 공유 가능  Context API 활용 예다크 모드 / 라이트 모드 테마 설정로그인 상태 관리 (Auth Context)언어 설정 (i18n, 다국어 지원) useContext 사용법 createContext로 컨텍스트 생성Context.Provider에서 value로 상태, 함수 전달useContext(Context)로 데이터 접근 ..

useEffect & useRef useEffect 컴포넌트에서 부수 효과(Side Effects)를 처리할 때 사용되는 Hook Side Effects 관리API 호출, 타이머 설정, 구독(subscription)등의 작업을 처리할 때 사용React의 렌더링 흐름과 독립적으로 실행됨컴포넌트 생명주기 관리(라이프사이클 제어 가능)클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount를 대체특정 시점(마운트, 업데이트, 언마운트)에서 실행되는 코드를 넣을 수 있음의존성 배열을 활용한 조건부 실행특정 상태 값이 변경될 때만 실행되도록 제어 가능 useEffect 기본 문법useEffect(() => { console.log("컴포넌트가..

전통적인 웹 개발 (HTML, CSS, JavaScript + jQuery) 기존의 웹 개발 방식→ HTML, CSS, JavaScript를 직접 사용해서 웹사이트를 제작특히 jQuery 같은 라이브러리를 사용해서 DOM을 조작하는 방식이 일반적 HTML, CSS, JS가 분리된 상태로 개발됨DOM을 직접 조작페이지 새로고침이 많음 (서버 렌더링 중심)복잡한 UI에서는 유지보수가 어려움재사용성 부족함 동작 원리서버 → 클라이언트(브라우저)로 HTML 파일 전송브라우저 :  HTML을 렌더링하고, CSS를 적용JavaScript가 실행되면서 동적인 UI 추가 (이벤트 리스너, 애니메이션 등)특정 이벤트 발생 시 document.querySelector() 같은 방법으로 DOM을 직접 수정새로운 데이터를 불..

Component 리액트(React)에서 UI를 구성하는 기본 단위→ 레고 블록처럼, 여러 개의 작은 컴포넌트를 조합하여 복잡한 UI를 만들 수 있음→ 컴포넌트는 재사용 가능해야 함 (한 번 만든 컴포넌트는 다양한 곳에서 반복적으로 사용할 수 있어야 함) 재사용성 : 동일한 UI 요소를 여러 곳에서 사용할 수 있어 코드 중복을 줄임유지보수 용이 : 코드가 잘 조직되어 있어 변경 및 수정 용이가독성 증가 : 역할별로 컴포너트를 분리하면 전체 코드의 가독성이 높아짐  컴포넌트의 유형 함수형 컴포넌트 (Functional Component)ES6 함수 형태로 작성되며, 간결하고 가독성이 좋음React Hooks(useState, useEffect 등)를 사용하여 상태 및 생명주기 기능을 관리 가능최근 리액트 ..

State React에서의 State 컴포넌트의 상태컴포넌트가 가지고 있는 데이터나 조건을 나타냄예:Todo List에서의 할 일 목록 == 컴포넌트의 상태→ 사용자가 할 일을 추가하거나 삭제하면 상태가 변경, 이에 따라 UI가 업데이트됨 useState Hook을 사용한 상태 관리 상태 값을 정의하고, 이를 업데이트하는 함수도 함께 제공해야 함 (상태 정의, 변경)const [state, setState] = useState(initialValue);state: 현재 상태 값setState: 상태를 변경하는 함수initialValue: 초기 상태 값상태 값을 변경하면 React가 자동으로 해당 컴포넌트를 다시 렌더링 하여 UI를 업데이트함 State 업데이트 방법 새로운 값을 바로 설정 setState..

JSX JavaScript XML의 약자로, JavaScript의 확장 문법 HTML과 비슷하게 보이지만, 실제로는 JavaScript 코드React에서 JSX를 사용하면 UI를 보다 직관적으로 구성 가능  직관적이고 가독성이 좋음JSX는 HTML과 유사해서 웹 개발자들이 직관적으로 이해하기 좋음기존 JavaScript의 React.createElement() 방식보다 코드가 깔끔하고 가독성이 좋음UI와 로직의 통함UI와 관련된 로직을 한 곳에서 작성 가능예:버튼을 생성, 생성한 버튼을 클릭했을 때의 동작을 같은 파일에서 정의  JSX의 사용법 JSX 안에서 JavaScript 사용 JSX 내부에서 JavaScript 표현식을 사용하려면 {} 중괄호 사용const name = "리액트";const ele..

React App 생성npx create-react-app 앱이름npx(Node Package eXecute)설치 없이 패키지 실행최신 버전 실행로컬 설치된 패키지 실행일회성 스크립트 실행특정 패키지를 글로벌 설치 없이 한 번만 실해하고 삭제→ 전역 설치 없이 최신 버전으로 프로젝트 생성  애플리케이션 실행cd 앱이름만든 프로젝트 폴더로 이동 (changediretory 앱이름)npm startReact App 시작 (Node Package Manager start)  CRA

React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 JavaScript를 사용하여 웹사이트의 UI(User Interface)를 구성하는 라이브러리→ 우리가 보는 버튼, 메뉴 등과 같은 요소를 쉽게 만들고 관리할 수 있도록 도와줌 페이스북에서 개발하여 오픈 소스로 공개됨  선언적 UI 라이브러리 선언적(Declarative) 프로그래밍 방식을 따름→ "어떻게(How)" 동작하는지보다 "무엇(What)"을 해야 하는지에 집중 예:특정 버튼을 클릭하면 화면이 어떻게 변해야 하는지를 선언적으로 작성하면, 내부적인 렌더링 과정은 React가 자동으로 처리함→ 코드의 가독성을 높이고 유지보수를 쉽게 할 수 있음 컴포넌트 기반 (Component-Based) UI를 컴포넌트(Component)..