1. 기초영상 2. 심화영상 3. Composition? (컴포지션?) Nested Component 컴포넌트 라고도 하고 중첩 컴포넌트라고도 합니다. 컴포넌트를 중첩하는 것을 말합니다. 리액트 앱은 수많은 컴포넌트를 가지게 됩니다. 컴포넌트간의 주고받는 데이터 뿐만 아니라 박스나 컨테이너에서 사용하는 스타일코드의 중복까지도 최소화 하려면 props 만으로는 한계가 있는데요. 이때 사용할수 있는것이 composition(합성) 입니다. 앱에서 반복 사용되는 UI 디자인 코드를 별도의 컴포넌트로 생성하여 … 더 읽기
1.리액트소개 1.1.리액트란? Info: 🔗 리액트공식커뮤니티 JavaScript 라이브러리 UI(사용자 인터페이스)를 만들기 위해 Facebook에서 개발. 페이스북과 개발자,기업,단체에 의해 유지보수됨. 리액트는 싱글 페이지 애플리케이션 이나 모바일 애플리케이션 개발에 사용되기도 함. 1.2.리액트의 특징 Info: JSX (javascript extension)라는 자바스크립트 확장문법을 사용한다. 웹브라우저에서는 바로 JSX를 해석할수 없으며 바벨이라는 트랜스컴파일러를 이용해서 자바스크립트로 변환후 웹 브라우저에 적용한다. • https://babeljs.io/repl 에서 변환되는 과정을 볼수있다 SPA (Single … 더 읽기
리액트의 컴포넌트 전략 리액트 컴포넌트 전략은 재사용성, 유지보수성, 성능을 극대화하여 효율적으로 애플리케이션을 구축하기 위한 다양한 설계 원칙과 패턴을 의미합니다. 다음은 대표적인 리액트 컴포넌트 전략입니다. 1. 컴포넌트 분리 원칙 단일 책임 원칙(SRP, Single Responsibility Principle): 하나의 컴포넌트가 하나의 역할만 수행하도록 설계합니다. 예를 들어, 데이터 요청 로직과 UI 렌더링 로직을 분리하면 컴포넌트가 더 간결해지고 재사용성이 높아집니다. 원자적 디자인(Atomic … 더 읽기
백엔드 로직없이 로컬스토리지에 간단히 구현하는 방법 https://codesandbox.io/p/devbox/tjkjny
Untitled https://www.geeksforgeeks.org/installation-guide/how-to-install-reactjs-on-windows/
3차시 컴포넌트의 props 를 기억 할 것이다. props란 컴포넌트 간 주고받는 데이터이며 부모가 자식에게 전달할수 있다고 배웠다. 예시로 여러 친구를 초대하고 한 테이블 위 3개의 동일한 접시에 3종류의 각기 다른 음식을 전달하는 사례를 들어 설명하였다. 🔗 영상링크 18:29 그림 1 을 리액트 컴포넌트로 구현 할 경우 그림 2 의 구조가 될 것 이다. 햄버거,딸기,사과는 컴포넌트로 전달되는 props 즉 속성의 값이 … 더 읽기
1. 시작파일 파일다운로드 파일활용방법 만약 이전 파일이 없을 경우 아래의 파일을 다운로드 하여 진행한다 시작 파일 #2. App 컴포넌트 비우기 ./src/App.js 컴포넌트를 깨끗하게 정리하자. App.js function App() { return <div className='App'></div>; } export default App; 1 2 3 4 5 index.js 수정 index.js import React from 'react'; import ReactDOM from 'reactdom/client'; import './index.css'; import App … 더 읽기