odada

컴포넌트(Components), Props - react 배우기1. 리액트 컴포넌트(React Components)란?컴포넌트란 재사용 가능한 UI 조각을 의미한다.컴포넌트를 이용하면 더 쉽게 UI를 재사용할 수 있고, 유지보수도 쉬워진다.컴포넌트는 독립적이고 재사용 가능하며, 여러 컴포넌트를 조합하여 화면을 구성할 수 있다.컴포넌트는 트리 형태로 구성되어 있으며, 최상위 컴포넌트는 하나만 있어야 한다.- 컴포넌트의 규칙컴포넌트는 함수 또는 클래스로 정의할 수 있음컴포넌트 이름은 대문자로 시작해야 함소문자로 시작할 경우 컴포넌트를 DOM 태그로 인식하게 됨컴포넌트로부터 엘리먼트를 생성하여 이를 리액트 DOM에 랜더링에 전달할 수 있음// html div 태그로 인식const element = ;// 컴포..

1. 엘리먼트의 정의 리액트 앱의 가장 작은 블록들을 엘리먼트라고 한다. 개발자모드의 html 요소가 DOM 엘리먼트이다. 리액트 엘리먼트는 DOM 엘리먼트의 가장 표현으로 리액트 앱의 가장 작은 블록들을 엘리먼트라고 한다. 아래 코드가 실행될 때, 대입 연산자의 오른쪽 부분은 리액트의 creactElement() 함수를 사용하여 엘리먼트를 생성한다. const element = Hello, world; 2. 엘리먼트 표현 엘리먼트는 자바스크립트 객체 형태로 존재한다. 컴포넌트 유형과 속성 및 내부의 모든 자삭에 대한 정보를 포함하고 있는 일반적인 자바스크립트 객체 { type: 'button', // 엘리먼트의 유형 props: { // 엘리먼트의 속성 className: 'btn-red', child..

1. JSX란? JSX = JavaScript + XML/HTML A syntax extension to JavaScript (자바스크립트의 확장 문법) 대입 연산자를 통해 Html 코드를 변수에 저장한다. const element = Hello, world!; 2. JSX의 역할 JSX로 작성된 코드는 모두 자바스크립트 코드로 변환 JSX는 React.createElement()로 변환된다. // JSX Hello => // React.createElement() React.createElement('div', { id: 'foo' }, 'Hello'); 3. JSX의 장점 코드가 간결해진다. 가독성이 향상된다. // jsx 사용 Hello, {name}; // jsx 사용 안함 React.reactE..

React Package 설치Create React App 을 사용하여 React 프로젝트를 생성하고, React 프로젝트에 필요한 패키지를 설치하는 방법을 알아봅니다.1. Create React App 이란?Create React App은 React 프로젝트를 생성할 때 필요한 환경을 구축해주는 도구입니다.Create React App 공식문서장점별도의 설정 없이 바로 React 프로젝트를 생성할 수 있습니다.초기 개발 시간 단축, 개발 생산성 향상Babel, Webpack 같은 도구들을 별도로 설치할 필요가 없습니다.프로젝트에 필요한 설정이 미리 적용되어 있고 패키지가 설치되어 있습니다.단점빌드 설정을 커스터마이징하기 어려움리액트 앱 구조에 대해 이해하기 어려울 수 있음원..

리액트 홈1. React란?https://odada.me/250React는 페이스북에서 개발한 UI 라이브러리로, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.나무위치 보러가기: React2. React 특징- Virtual DOMReact는 Virtual DOM을 사용하여 빠른 렌더링을 구현합니다. Virtual DOM은 실제 DOM의 가벼운 복사본으로, React는 Virtual DOM을 사용하여 실제 DOM과 비교하여 변경된 부분만 업데이트합니다.이미지출처: 소플의 리액트- ComponentReact는 컴포넌트 기반으로 UI를 구성합니다. 컴포넌트는 재사용이 가능하며, 각 컴포넌트는 독립적으로 작동합니다.function App() { return Hello, World!;}..

https://react.vlpt.us/basic/02-prepare.html 2. 작업환경 준비 · GitBook 2. 작업환경 준비 참고: 만약, 여러분이 현재 사용중인 컴퓨터에 프로그램을 설치 할 수 없는 환경이라면, Codesandbox 의 리액트 샌드박스 를 사용하여 개발을 하시면 됩니다. 앞으로 계속해서 튜토 react.vlpt.us 2. 작업환경 준비 참고: 만약, 여러분이 현재 사용중인 컴퓨터에 프로그램을 설치 할 수 없는 환경이라면, Codesandbox 의 리액트 샌드박스 를 사용하여 개발을 하시면 됩니다. 앞으로 계속해서 튜토리얼을 진행하기 전에, 다음 항목들을 설치해주어야 합니다. Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반..

https://react.vlpt.us/basic/01-concept.html 1. 리액트는 어쩌다가 만들어졌을까? · GitBook 01. 리액트는 어쩌다 만들어졌을까? 리액트 학습을 본격적으로 하기 전에, 리액트라는 라이브러리가 어쩌다가 만들어졌는지 알면 리액트를 이해하는데 도움이 될 것입니다. JavaScript를 사용하여 react.vlpt.us 01. 리액트는 어쩌다 만들어졌을까? 리액트 학습을 본격적으로 하기 전에, 리액트라는 라이브러리가 어쩌다가 만들어졌는지 알면 리액트를 이해하는데 도움이 될 것입니다. JavaScript를 사용하여 HTML 로 구성한 UI 를 제어해보셨다면, DOM 을 변형시키기 위하여 우리가 어떤 작업을 해야하는지 익숙 할 것입니다. 브라우저의 DOM Selector A..