[React] First study

리액트 설치 없이 간단한 코딩이 가능한 사이트

https://replit.com/

The collaborative browser based IDE

 

react 는 spa = 싱글 페이지 어플리케이션으로

웹페이지가 하나밖에 없다. (html 파일이 딱 하나) 이 내용을 자동으로 업데이트 해주므로 refesh 할 필요가 없다.

 

-index.html

<div id="root"> 기억해두기

 

 

-main.jsx

html 과 app.jsx파일을 연결해주는 것!

즉 html과 자바스크립트를 연결해주는 연결고리이다.

이 루트를 이어주겠다.

 = 이 루트에 <App/>을 그려주겠다!라는 의미

 

이때 App 은 ./App 에서 데리고 오겠다!

(건드릴 일이 없어서 그냥 연결고리라는 것만 생각하기)

 

-app.jsx

박스를 그려보자!

 

react는 class가 아니라 className 이다!

이유는?

jsx도 일종에 자바스크립트이기 때문에 class라는 문법이 존재한다.

따라서 className 를 사용해야 태그에 class를 줄 수 있다.

이때 css는 App.css로 들어가면 있다.

 

-App.css

 

React의 핵심 기능! 컴포넌트 만들기

위에 만든 박스를 여러개 만들고 싶을땐?

 

-Box.jsx를 만들어주자

함수를 만들어 주고 export default Box라고 표시!

이 의미는 이 함수를 수출하겠다는 의미로

 

다시 App.jsx로 돌아가서 만든 컴포넌트를 사용하자

import 로 수출한 함수를 불러오고 <Box/> 와 같은 형식으로 사용하면 간단하게 박스 3개를 만들 수 있다

이로인해 코드가 엄청 짧아지게 된다.

 

여기서! 근데 만약 박스 안에 글자를 바꾸면서 함수를 복사하고 싶다면?

 

이름이 다 다르게 들어간 것을 확인 할 수 있다.

컴포넌트한테 다이나믹 한 값을 주고 싶을때 props를 사용한다. 이때 props는 object형식으로 저장이 된다.

 

한번 더 보면?

와우!

리액트가 컴포넌트 활용이 쉽고 간편해서 재미쓴 것 같다.

간단한 클릭 이벤트를 주려면

 

박스 컴포넌트 안에 함수를 만들어 준다.

ES6문법을 사용했다.

HTML도 있는데 자바스크립도 있다?

이것을 JSX문법이라고 한다.

 

이러한 세트를 컴포넌트라고 하고 react는 컴포넌트를 잘 활용할 수 있다.