본문 바로가기

리엑트19

Chapter 03 컴포넌트 컴포넌트란?스스로 상태를 관리하는 캡슐화된 코드 조각 컴포넌트의 기술적인 설명 : 컴포넌트는 하나의 JSX를 반환하는 함수이다. 그리고 아래 처럼 컴포넌트는 jsx에서 하나의 태그처럼 쓸 수 있다. function App(){  return(          Hello,      World      );}ReactDOM.render(  ,  document.getElementById('root'));  컴포넌트 만들기JSX 와의 차이는?- 컴포넌트는 기본적으로 함수이기 때문에 자신만의 고유한 로직이 들어갈 수 있다.- 스스로 상태를 가질 수 있다. (상태가 변하면 알아서 반영된다.) import, export- es6에서 모듈을 불러오고 내보내는 방법 컴포넌트 생성 시, 주의사항컴포넌트 이름은 Pasc.. 2024. 6. 13.
JSX JSX란?React 에서 쓰는 JSX 문법  JSX = HTML + Javascriptjavascript를 확장한 문법 (Javascript XML)- 모양은 HTML에 가깝다- 내부적으로 Javascript를 사용할 수 있다.- React는 이 JSX를 이용하여 화면을 그린다. (컴포넌트) const element = Hello, world!;  JSX의 특징- JSX에서 사용되는 태그의 속성 이름이 HTML과 조금 다르다.- 태그를 명시적으로 닫아줘야 한다.- 하나의 태그로 감싸져 있어야 한다.  Hello, world!위 코드는 하나의 태그로 감싸져 있지 않고, input 태그가 닫히지 않았으므로 JSX가 아니다. 반면에 아래는 JSX 문법을 만족한다고 볼 수 있다. Hello, world!   라.. 2024. 6. 10.
React란? React가 뭔가요?사용자 인터페이스를 만들기 위한 JavaScript 라이브러리(SPA 라이브러리) *프레임워크 : 개발을 위한 기본 틀, 뼈대*라이브러리 : 개발에 필요한 도구 또는 그 집합 => 리엑트는 프레임워크가 아니라 라이브러리이다. 리액트는 그 모습이 프레임워크처럼 생겼지만 프레임워크로 갖춰야 할 기본적인 요소들을 모두 포함하고 있지는 않다.  React를 배워야 하는 이유.1. 트렌드다- 많이 쓰이고 있고 수요가 많다.- 생태계가 넓다 2. 편하다.- SPA- 화면을 여러 단위로 쪼개고, 재사용하는 식으로 코드 관리가 용이함- 유용한 라이브러리들이 많다.   React의 특징리액트는 크게 두 가지 특징을 가지고 있다. 1. 컴포넌트 기반 설계2. Virtual DOM (가상돔)  컴포넌트 .. 2024. 6. 10.