[React] React.js 시작

 

 

 

우선 아래 사이트에 들어가서 node js를 설치해주어야 한다 !

 

https://nodejs.org/en

Node.js

 

 

node js 버전 확인은 cmd창에서 아래와 같이 확인 가능하다.

 

React 프로젝트 생성은 아래와 같이 npx create-react-app [프로젝트이름] 으로 생성 가능하다.

 

npx create-react-app test-app

 

index.js

 

 

우선 index.js를 살펴보면 React.StrictMode라는 것이 있는데 애플리케이션 내에서 잠재적인 문제를 알아내기 위한 도구로, Fragment와 같이 UI를 렌더링하지 않고, 자식들에 대한 부가적인 검사와 경고를 활성화 하는 도구이다.

위 코드는 public폴더의 index.html 파일 내의 <div id="root">에 렌더링을 한다는 의미이다.

 

App.js

 

 

그리고 App.js를 살펴보면 React 로고를 보여주는 코드가 있는 것을 볼 수 있다.

 

 

코드를 위와 같이 수정하고 npm run start를 해주면 아래와 같이 페이지가 열리는 것을 볼 수 있다.

 

 

 

JSX

 

React Component는 index.js에서 <App/>를 호출하는 것처럼 XML 형식의 값을 반환하는데, 이를 JSX라고 부른다.

JSX는 리액트에서 View를 표현할 때 사용하는 문법이자 확장자입니다! HTML 과 비슷하지만, 실제로는 Javascript 기반이다.

 

 

 

Test.jsx

 

다음으로 App.js와 같은 위치에 Test.jsx라는 파일을 만들어 아래와 같이 작성해준.

 

 

 

위와 같이 function 함수 안에 return 하는 곳에 JSX 문법을 사용할 수 있다.

JSX는 자바스크립트 기반이라 내부에서 자바스크립트 값을 사용할 수 있다. 변수는 아래와 같이 대괄호안에 사용한다.

 

 

 

함수 내부에서 css를 적용하고 싶으면 아래와 같이 작성해줍니다.

 

 

다음으로 Text.css 파일을 Test.jsc파일과 같은 위치에 생성해줍니다.

 

 

 

위와 같이 css파일을 적용시켜줄 수 있습니다.

 

Props

props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하기 위해 사용되는 것입니다. 읽기 전용이며, 자식 컴포넌트에서 변경할 수 없으며, 부모 컴포넌트에서 전달한 값은 자식 컴포넌트에서 변경되지 않아야 합니다. 그리고 부모 컴포넌트가 props를 통해 데이터를 제어하므로, 데이터는 단일 소스에서 관리됩니다.

 

State

state는 컴포넌트 내부에서 관리되는 데이터를 나타내며, 컴포넌트의 상태가 변경될 때마다 React는 자동으로 리렌더링됩니다.

또한 컴포넌트 내부에서 변경이 가능하며, 'setState'메서드를 사용해 상태를 업데이트하고, React에게 상태 변경을 알려줍니다. 그리고 해당 컴포넌트 내에서만 관리되고, 외부에서 직접 변경할 수 없습니다.

 

 

위와 같이 작성해주면 버튼을 클릭할 때마다 숫자가 올라가는 것을 볼 수 있습니다.

 

Reference

 

https://narup.tistory.com/183

[React] React.js 강좌 1. 기초 개념 정리