목차
- 리액트란?
- 라이브러리, 프레임워크 차이
- 리액트 특징
- 컴포넌트(Component)란?
- 리액트 환경 기본 세팅
-
리액트
React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
라이브러리와 프레임 워크의 차이
라이브러리: 폴더 구조가 없는 모듈
프레임워크: 폴더 구조가 있는 모듈
React의 특징
1. Data Flow
2. Component 기반 구조
3. Virtual Dom
4. Props and State
5. JSX
이번 글에서는 Component에 대해서만 가볍게 알아볼 것이다.
Component란?
Component는 독립적인 단위의 소프트웨어 모듈을 말한다.
즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있다.
최소로 2개의 라이브러리만 있으면 , 리액트 환경을 만들 수 있다.
->(이 두개)react, react-dom,component (Meta(페북)에서 만듦)
->webpack, babel (페북에서 만든거 아님, 리액트만을 위한게 아님)
기본 세팅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel"></script>
</body>
</html>
스크립트 태그를 열고 text/javascript 대신 text/babel을 써줘야 babel 문법을 사용할 수 있다.
<div id="root"></div>
<script type="text/babel">
class Hello extends React.Component{
render(){
return(
<span>Hello </span>
)
}
}
//각각의 컴포넌트는 이런 형태로 쓴다.
class World extends React.Component{
render(){
return(
<span>World~~</span>
)
}
}
class App extends React.Component{
render(){
return(
<div>Hello world! <Hello /> <World />
</div>
)
}
}// 위에 사용한 컴포넌트를 App이라는 클래스 안에 넣고 싶을 때 이렇게 사용한다.
ReactDOM.render(
<App/>,
document.querySelector('#root')
)
//id가 root인 div안에 App이라는 클래스를 랜더하겠다(화면에 출력하겠다)는 뜻.
</script>
여기서 하나 궁금한 점, 컴포넌트 안 return은 꼭 div 든 span이든... 꼭 하나의 태그로 묶여 있어야 하나?
대답은 Yes이다.
딱히 필요하지 않은데 매번 사용하기에 번거로움이 있다. 그런 경우에는
<React.Fragment></React.Fragment> 태그로 묶어주면 된다.
예시
class Example extends React.Component{
render(){
return(
<React.Fragment>
Hello world!
</React.Fragment>
)
}
}
참고로, Component 명의 시작은 항상 대문자여야한다!
Reference : https://velog.io/@jini_eun/React-React.js%EB%9E%80-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC
'프론트엔드 > React' 카테고리의 다른 글
| [React]틱택토게임 만들기 (0) | 2022.04.14 |
|---|---|
| [React] 타자 입력 시마다 value값 변하는 form만들기 (0) | 2022.04.14 |
| [React] 버튼 누를 때마다 숫자 증가, 감소하는 카운터 만들기 (0) | 2022.04.13 |
| [React] 버튼 클릭할 때마다 버튼 글씨 바꾸기 (0) | 2022.04.13 |
| [React] props, state에 대해서 알아보자.(예시 코드 有) (0) | 2022.04.13 |