2강. 리액트 시작하기
[무료] 처음 만난 리액트(React) - 인프런 | 강의
자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런...
www.inflearn.com
리액트 없이 html, css, JavaScript 만으로 웹사이트를 만들 수 있지만, 리액트를 적용했을 떄 다양한 장점이 있기 때문에 리액트를 사용하는 것!
1. 실습으로 html 만을 사용해서 간단한 웹사이트를 만들어보고, css를 사용해서 스타일을 입히기
2. 완성된 웹사이트에 리액트를 적용해보고, 리액트 앱을 생성해주는 크리에이트 리액트 앱에 대해 알아보기
HTML만으로 간단한 웹사이트 만들기
HTML은 웹사이트의 전체 뼈대를 구성
스타일 없이 뼈대만 있는 간단한 웹사이트 만들기 실습
index.html
1. 필수적인 html 태그 작성 (VS Code 또는 메모장 사용)
index.html
<html>
<head>
</head>
<body>
</body>
</html>
전체 코드는 html의 가장 기본이 되는 <html> 태그로 둘러싸여 있고, 그 안에 <head> 태그와 <body> 태그가 순서대로 들어가 있음
2. 타이틀 태그를 이용해 웹사이트의 제목 넣기
index.html
<html>
<head>
<title>sohee's blog</title>
</head>
<body>
</body>
</html>
3. 완성된 html 파일을 웹브라우저에서 열어보기
아직 웹사이트의 몸통 부분인 body 태그 안에 아무 내용이 없기 때문에 화면에는 아무것도 보이지 않음
브라우저의 탭 부분에 제목이 나오는 것을 확인할 수 있음
4. 웹사이트에 접속하면 실제로 보이는 컨텐츠 작성
index.html
<html>
<head>
<title>sohee's blog</title>
</head>
<body>
<h1>Welcome to sohee's blog!</h1>
</body>
</html>
body 태그 안에 h1 태그를 사용해서 간단한 컨텐츠 작성
CSS를 사용하여 웹사이트 스타일링하기
CSS 코드를 별도 파일로 분리해서 작성한 뒤에, 해당 파일을 불러와서 html에 적용
1. styles.css 작성
styles.css
h1 {
color: midnightblue;
font-style: italic;
}
h1 태그의 텍스트 색상을 남색으로 변경하고, 기울임꼴 스타일인 italic 스타일을 적용하는 코드
2. styles.css를 index.html에 적용
index.html
<html>
<head>
<title>sohee's blog</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to sohee's blog!</h1>
</body>
</html>
link 태그를 이용해 html 파일에서 css 파일을 불러와야 함
* link : 현재 html 파일과 외부 리소스 사이의 관계를 정의할 때 사용, css 파일을 불러오거나 웹브라우저의 탭에 나오는 아이콘인 favicon 등을 넣기 위해 가장 많이 사용됨
(주의할 점) index.html 파일과 styles.css 파일이 동일한 디렉터리에 위치해야 함
웹사이트에 React.js 추가하기
1. DOM Container(Root DOM Node) 추가
Virtual DOM의 시작점
index.html
<html>
<head>
<title>sohee's blog</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<h1>Welcome to sohee's blog!</h1>
<div id="root"></div>
</body>
</html>
root라는 id를 가진 div 태그를 추가
div 태그가 DOM container로 사용될 예정
2. Script 태그를 사용해서 React의 JavaScript 파일들을 가져옴
MyButton이라는 리액트 컴포넌트를 가져오는 코드 추가
index.html
<html>
<head>
<title>sohee's blog</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<h1>Welcome to sohee's blog!</h1>
<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="MyButton.js"></script>
</body>
</html>
react와 react-dom 두 개의 JavaScript 파일을 가져오고, 뒤에서 만들 MyButton이라는 리액트 컴포넌트를 가져오는 코드를 미리 넣어줌
브라우저에서 html 파일을 열어보면 아직 아무런 변화도 없음
아직 화면에 랜더링할 리액트 컴포넌트를 만들지 않았기 때문
3. 간단한 리액트 컴포넌트 만들기
MyButton.js
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
'button',
{ onClick: () => setIsClicked(true) },
isClicked ? 'Clicked!' : 'Click here!'
)
}
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);
아주 간단한 리액트의 함수 컴포넌트
마지막 두 줄의 코드 : 리액트 DOM의 랜더 함수를 사용해서 리액트 컴포넌트를 dom container에 랜더링하는 코드
Script 태그를 이용해서 컴포넌트를 가져왔다고 해도 컴포넌트가 화면에 보이는 것이 아니기 때문에 필요한 코드
MyButton이라는 이름의 리액트 컴포넌트가 보임
버튼을 클릭해보면 버튼의 라벨이 Clicked!라고 바뀜
-> 리액트 컴포넌트의 state가 변경되었기 때문
리액트를 생성해서 웹사이트를 만들 때 마다 이러한 환경설정을 해주어야 한다면 번거로움
이 모든 과정이 필요없이 곧바로 리액트 웹 애플리케이션을 개발할 수 있도록 프로젝트를 자동으로 생성해주는 create-react-app이라는 패키지가 있음
'개발공부 > REACT' 카테고리의 다른 글
| JSX의 정의와 역할 [처음 만난 리액트 #9] (1) | 2023.01.26 |
|---|---|
| create-react-app 크리에이트 리액트 앱 [처음 만난 리액트 #8] (0) | 2023.01.25 |
| 리액트의 장점과 단점 [처음 만난 리액트 #6] (0) | 2023.01.23 |
| 리액트는 무엇인가? [처음 만난 리액트 #5] (0) | 2023.01.21 |
| 개발환경 설정하기 - Node.js와 npm / VS Code 설치 [처음 만난 리액트 #4] (0) | 2023.01.21 |
