React
React는 jQuery와 같은 프론트엔드 개발을 위한
라이브러리이다.
컴포넌트, 선언형 -> 컴포넌트 단위로 작성
컴포넌트를 여러 곳에서 사용하게 되며 생산성과 유지 보수가 용이해졌다.
- JS 코드 안으로 HTML을 가져왔다.
JSX라고 부르는 JavaScript를 확장한 문법
return()감싸져 있는 코드 (HTMl 문법과 비슷해보이는 JSX)
ReactDOM.render(app, domContainer);
리액트는render함수를 1번만 호출
.html파일에서의 기본 구조
<!-- 기본구조 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 1분만에 추가해보기!</title>
</head>
<body>
<h1>내 html에 리액트 1분만에 추가해보기!</h1>
<p>단 1분만에 설치없이 리액트를 추가할 수 있다구요?</p>
<div id="root"></div>
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
function HelloButton(props) {
return (
<button onClick={() => console.log("실행")}>Hello</button>
);
}
const app = (
<div>
<HelloButton />
<HelloButton />
<HelloButton />
<HelloButton />
<HelloButton />
</div>
);
// DOM에 리액트 컴포넌트 랜더링하기
const domContainer = document.querySelector("#root");
ReactDOM.render(app, domContainer);
</script>
</body>
</html><HelloButton /> 처럼 함수로 만든 것을 태그로 사용하며 맨 상위는 하나의 태그로 감싸줘야 한다.
예전에는 class 문법을 사용하였지만 요즘은 함수형을 많이 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>리액트 1분만에 추가해보기!</title>
</head>
<body>
<div id="root"></div>
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
function ImageSlide(){
return (
<img src="https://picsum.photos/200/300" width = "300px" height="300px"/>
);
}
function Title(){
return (
<h1>jeju도의 명소 weniv</h1>
);
}
function Info(){
return (
<p>100km 거리</p>
);
}
function Price(){
return (
<p>100000</p>
);
}
const app = (
<div>
<ImageSlide/>
<Title/>
<Info/>
<Price/>
</div>
);
const domContainer = document.querySelector("#root");
ReactDOM.render(app, domContainer);
</script>
</body>
</html>
const app = ()
const app = (
<div>
{[<ImageSlide/>,
<Title/>,
<Info/>,
<Price/>]}
</div>
);{} 안을 자바스크립트 문법으로 인식하여 위와 같이 사용해도 된다.
아니면 [<ImageSlide/>,<Title/>,<Info/>,<Price/>]와 같은 형태로 만들어서 사용 가능
const app = (
<div>
{
json.map((i) => (
<div>
<ImageSlide/>
<Title/>
<Info/>
<Price/>
</div>
))
}
</div>
)함수로 만들기
기본 내용은 똑같으며 <함수형태/> 형식으로 사용
{} 안에는 js 코드 사용 가능
{Hello()} 도 가능
function Hello() {
return (<h1>hello world 1</h1>);
}
const app = (
<div>
<Hello/>
<Hello/>
{Hello()}
</div>
)변수로 만들기
{변수형태} 로 사용하기
const Hello2 = <h2>hello world 2</h2>
const app = (
<div>
{Hello2}
</div>
)기본 골격
const header = (
<h1>h1입니다.</h1>
<p>메뉴</p>
);
const section1 = (
<section>
<p>제품 소개</p>
</section>
);
const section2 = (
<section>
<p>회사 소개</p>
</section>
);
const section3 = (
<section>
<p>팀 소개</p>
</section>
);
const footer = (
<section>
<p>회사 소개</p>
</section>
);
const app = (
<div>
{header}
{section1}
{section2}
{section3}
{footer}
</div>
);
function 자기소개(props){
return (
<div>
<p>제 이름은 {props.name}</p>
<p>제 나이는 {props.age}</p>
<p>제 통장은 {props.money}</p>
<p>저희 집은 {props.house}</p>
<p>제 커피는 {props.coffee}</p>
</div>
);
}
const app = (
<main>
<자기소개
name='lee'
age = '10'
money = {1000}
house = 'null'
coffee = 'full'/>
</main>
);
함께 배워나가고 싶습니다!