React 1일차

리액트란?

 

리액트 아이콘

 

리액트는 컴포넌트 기반 아키텍처를 사용하여 재사용 가능한 UI 요소를 만들고, 가상 DOM을 활용해 성능을 최적화한 프런트 개발 도구이다.

리액트는 SPA(Single Page Application) 방식으로 웹을 만들어주며, 화면을 여러 단위로 쪼개고 재사용하기 때문에 코드 관리에 용이하다.

 

가상 DOM을 통해 SPA에서 동적인 변화를 효율적으로 관리하기 위해 사용된다.

js와 jQuery는 실제 DOM을 접근하여 편집하지만, React는 가상 DOM을 통해 간접적으로 편집한다.

 

보통 JS와 jQuery는 명령형으로 하나씩 명령을 해주는 방식이라면, React는 선언형으로 컴포넌트에서 상태를 관리한다.

 

리액트는 대규모 프로젝트, 동적인 UI가 많은 웹 애플리케이션에 사용된다.

여러 페이지에서 컴포넌트를 재사용해야 하거나 성능 최적화가 중요하고 유지보수성과 확장성이 필요한 프로젝트일 때 사용된다.

 

브라우저는 리액트를 실행할 수 없기에 js로 변환하는 과정이 필요하다.

 

JSX

1. JSX는 HTML과 비슷한 문법으로 태그 형식을 사용하며, 태그 형식으로 사용하기에 가독성이 좋다.
2. 자바 스크립트 표현식을 {}를 사용해 삽입할 수 있어 동적으로 값을 바인딩하거나 계산된 값을 표시할 수 있다.
3. 태그 형식이기에 속성을 사용할 수 있다.
4. 반환하는 요소는 반드시 하나이며, 여러 개일 경우 하나의 부모 요소로 묶어야 한다.(<> </>로 묶는 이유.)
5. 자바 스크립트 주석을 사용할 경우 {/*  */}로 감싸야한다.
6. 브라우저에 실행할 수 없기 때문에, Babel(Vite에서는 ESBuild)과 같은 트랜스파일러를 사용해 자바 스크립트로 변환한다.
   이때 변환 과정에 React.createElement() 함수를 호출하여 변환한다.

장점으로 가독성, 동적 콘텐츠 제작, 컴포넌트 기반으로 재사용성 증가 등이 있다.

 

컴포넌트

컴포넌트는 리액트에서 UI의 독립적이고 재사용 가능한 부분을 정의하는 구성요소로 스스로 상태를 관리하는 캡슐화된 코드 조각이다. 컴포넌트를 사용하면 작고 관리 가능한 단위로 나누어 효율적이고 유지보수가 용이한 애플리케이션으로 만들 수 있다.

컴포넌트는 반드시 첫 문자는 대문자로 시작하는 파스칼케이스로 작성하며, 최상위 컴포넌트의 이름은 APP이다.

 

모듈 시스템

import로 작성된 컴포넌트 파일을 가져오거나, export를 통해 외부로 노출시켜 다른 파일에서 사용할 수 있도록 만들 수 있다.

import Style from './components/Style'
export default App

 

컴포넌트 간에 데이터를 전달하는 방법

props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하여 자식 컴포넌트는 props로 받은 데이터를 사용해 UI를 렌더링 할 수 있다.

 

실습을 통해 알게 된 점들

• 만약 프론트 엔드로 갈 경우, 리엑트 이후 NEXT.JS와 TypeScript로 변환하여 고도화해 주는 작업을 하면 좋다.
• node_module은 .gitignore에 걸려서 깃허브에 올릴 수 없으므로, node_module을 다시 다운로드하기 위해서는 npm install 항상 필수이다. 
• styled-components 라이브러리를 통해 css를 추가할 경우 숫자에 단위(px)를 붙여야 하며, ``(백틱)으로 감싼다.

 

VScode에서 npm run build입력시 오류

npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1 파
일을
로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink
/?LinkID=135170)를 참조하십시오.
위치 줄:1 문자:1
+ npm run build
+ ~~~
    + CategoryInfo          : 보안 오류: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

이런 오류가 나올 경우! 

window Powershell를 관리자 권한으로 실행한 후, Get-ExecutionPolicy를 입력하면 Restricted이라고 나올 것이다.

Restricted라고 확인했으면, Set-ExecutionPolicy RemoteSigned를 입력한 후 A 또는 Y를 입력한다.

vscode 다시 실행 한 후, npm run build를 터미널에 입력하면 정상적으로 실행된다.