해당 예제는 공식문서를 참고하고 있습니다.
React는 jQuery와 같은 프론트엔드 개발을 위한 '라이브러리' 입니다.(반면 Angular, Blazor는 프레임웤) 따라서 우리는 필요한 만큼만 가져다 사용할 수 있습니다! + 해당 부분에서는 '한번 해보기' 정도로 살펴가면 좋습니다. 자세한 내용은 뒤에서 다뤄보겠습니다.
- 그 밖에 특징
- Facebook에서 관리
- 컴포넌트 관리 → 재사용
- Virtual DOM(바뀌는 부분만 업데이트)
- JSX(JS + XML)
- 싱글페이지 어플리케이션 만들기 좋음(링크가 바뀌지 않음, 공식홈페이지) → 사용자 경험
리액트 맛보기
Web Front-End를 처음 배우며 html/css/js로 이루어진 웹 페이지 제작에 대한 기초를 배우셨을거에요.
우리는 익숙한 방법에 단지 몇 줄만 추가하여 기존의 html에 React를 사용해 보도록 하겠습니다.
- HTML 파일에 React 랜더링을 위한 DOM을 만들어줍니다.
먼저 편집할 HTML 파일을 index.html 이름으로 만들고 에디터를 통해 열어줍니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>리액트 1분만에 추가해보기!</title> </head> <body> <h1>내 html에 리액트 1분만에 추가해보기!</h1> <p>단 1분만에 설치없이 리액트를 추가할 수 있다구요?</p> </body> </html>
그 다음 비어있는
<div> 태그를 하나 만들어줄께요.
바로 이 태그를 통해 React가 내용을 표시하게 됩니다.<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>리액트 1분만에 추가해보기!</title> </head> <body> <h1>내 html에 리액트 1분만에 추가해보기!</h1> <p>단 1분만에 설치없이 리액트를 추가할 수 있다구요?</p> <!-- 추가된 <div> --> <div id="root"></div> </body> </html>
<div> 태그에 식별을 위한 속성 id를 부여합니다. 이를 통해 js에서 태그를 찾고 React 컴포넌트를 출력하게 됩니다.- React / React Dom cdn추가하기
다음은 react와 reactDom 라이브러리를 추가하는 스크립트입니다. 해당 스크립트를 </body> 태그 앞에 추가하겠습니다.
해당 라이브러리를 이용해 React 컴포넌트를 만들고 우리가 만든 HTML문서에 추가합니다.
그리고 html파일과 같은 폴더에 hello_button.js 라는 이름으로 js파일을 하나 만들겠습니다.
그 다음 html에서 해당 파일을 추가해 주도록 할게요.
<!-- ... 기존의 html ... --> <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="hello_button.js"></script> </body>
- React 컴포넌트 만들기
앞서 만들어둔 hello_button.js 파일에 스크립트를 작성을 해주겠습니다.
해당 부분은 react 컴포넌트를 만드는 부분입니다. 잘 이해가 되지 않아도 괜찮습니다.
자세한 내용은 뒤에서 다뤄 볼 것입니다!!
// react 컴포넌트 정의하기 const el = React.createElement; class HelloButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'Hello World!'; } return el( 'button', { onClick: () => this.setState({ liked: true }) }, 'Hello' ); } }
- React 컴포넌트 추가하기
React 컴포넌트를 제작했으니 보여주는 과정만 남았습니다.
이제 Hello 버튼을 가장 앞 과정에서 만들었던
root id를 가지고 있는 div태그에 추가하면 끝입니다!
아래 코드를 hello_button.js 파일 제일 하단에 추가합니다.const domContainer = document.querySelector('#root'); ReactDOM.render(el(LikeButton), domContainer);
- 완성된 코드
- 배포할 때에는 production으로 바꿔주시면 됩니다.
- react.development → react.production
- react-dom.development → production
<!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="hello_button.js"></script> </body> </html>
// react 컴포넌트 정의하기 const el = React.createElement; class HelloButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'Hello World!'; } return el( 'button', { onClick: () => this.setState({ liked: true }) }, 'Hello' ); } } // DOM에 리액트 컴포넌트 랜더링하기 const domContainer = document.querySelector('#root'); ReactDOM.render(el(HelloButton), domContainer);
- 아래처럼 코드를 변경해보고 다시 실행해보세요.
return el( 'button', { onClick: () => { this.setState({ liked: true }); for (let i = 0; i < 10; i++) { console.log(`hello world ${i}`); } } }, 'Hello' );
- 크롬 웹 스토어에서 설치하시고 리엑트 홈페이지에 들어가서 개발자도구를 열어보세요.
