odada

React 배우기 - 상태(State) 1. State 상태란 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있는 데이터를 의미한다. - State와 Props의 차이 리액트 컴포넌트는 입력과 출력이 있는데 prop를 통해 입력된 데이터를 우리가 만든 컴포넌트 함수가 처리해서 retrun을 통해 출력한다. props는 컴포넌트를 사용하는 외부자를 위한 데이터이다. state는 props와 비슷하지만 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. state는 컴포넌트 자신을 위한 데이터이다. - State의 특징 상태는 객체 형태의 데이터이다. 상태는 컴포넌트 내부에서 선언되어야 한다. 상태는 props와 달리 컴포넌트 내부에서 값을 변경할 수 있다. - State를 사용하는 이유 사용자..

1. 이벤트(Event) 이벤트란 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 말한다. 이벤트를 사용할 때는 on이벤트명={이벤트 핸들러} 형식으로 사용한다. 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수로 함수의 형태로 작성해야 한다. 이벤트 핸들러에 ()를 붙이지 않는 이유는 이벤트를 등록할 때 함수를 호출하는 것이 아니라 함수를 등록하기 때문이다. 이벤트 종류 React 공식문서에서 확인 가능하다. 이벤트 객체 이벤트 핸들러의 첫 번째 파라미터로 이벤트 객체를 받을 수 있다. 이벤트 객체에는 이벤트가 발생한 DOM 요소에 대한 정보와 이벤트에 대한 정보가 들어있다. import React from 'react'; function App() { const handleClick = ..

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

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

1. React란 무엇인가? React (ReactJS)는 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리 원저자 : Jordan Walke 개발자 : 페이스북 및 공동체 저장소 : https://github.com/facebook/react 프로그래밍 언어 : javascript 종류 : 자바스크립트 라이브러리 웹사이트 : https://react.dev/ 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 자주 사용되는 기능을 정리해 모아 놓은 것 UI 라이브러리 웹사이트를 만들기 위해서는 HTML, CSS, JS를 모두 잘 다뤄야 하는데, 이러한 복잡한 사이트를 쉽고 빠르게 만들고 관리하기 위해 만들어진 것이 리액트이다. 2. React의 장점 빠른 업데이트와 렌더링 속도 컴..