생활코딩 리액트 강의 -> https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi
리액트는 왜 필요할까
예를 들어 이러한 코드가 있다고 생각해보자.
index.html
<html>
<body>
<Top></Top>
<Sidebar></Sidebar>
</body>
</html>,
sidebar.html
~
사이드바 만드는 겁나 긴 코드가 있다고 가정,
top.html
~
top 유아이 만드는 겁나 긴 코드가 있다고 가정index.html 파일을 보면 top /top 부분이나, sidebar /sidebar 와 같은 태그를 '내가' 적어주면 웹 브라우저에게 전달될 때는 저절로 sidebar.html과 top.html로(겁나 긴 코드) 바뀔 수 있다면? 겁나 편리.
-> 이하 장점들 정리
- 가독성 (=겁나 길고 복잡한 코드를 내가 정의한 컴포넌트로 표현할 수 있다는 것)
- 재사용성 (=top /top 이라고 한 번 정의해놓으면 다른 곳에서도 여러 번 재사용 가능함)
- 유지보수 편리 (=top.html에서 수정할 것이 생겼다면, top.html 파일 한 곳에서만 고쳐주면 top /top을 해놓은 모든 파일에도 같이 업데이트가 됨)
->컴포넌트 중심으로 웹 에플리케이션을 만드는 방법을 만들어보자!
->나도 컴포넌트 만들 수 있고, 남들이 만든 수많은 컴포넌트 써먹을 수 있다!
컴포넌트 만들어보기
App.js
import React, { Component} from 'react';
import './App.css';
class Subject extends Component {
render() {
return (
<header>
<h1>web</h1>
world wide web
</header>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
</div>
);
}
}
export default App;이 문법은 javascript가 아니고 jsx다! create-react-app이 jsx를 javascript로 컨버팅 해주는 것임.
이렇게 Subject라는 컴포넌트를 만들어 보았다.
App 컴포넌트 안에 <Subject'></Subject'> 라고 써주었지만 실제로 웹 페이지 개발자 도구에서 보면 웹은 <header'><header'>라고 써져 있는 것을 알 수 있다. (밑에 캡처 참고)
Props (-더 똑똑한 컴포넌트를 만드는 방법)
언제나 똑같이 나오는 컴포넌트를 약간만 변형해서 더 자유롭고 다양하게 써먹고 싶어! => props 써!
App.js의 일부분 코드를 보며 생각해보자,
<Subject></Subject>를 반복해서 쓰면 똑같은 결과가 계속 나옴.
그런데 나는 javascript 태그의 attribute 처럼 컴포넌트에도 똑같이 변형해서 다양하게 써먹고 싶어!
밑에처럼 바꿀 수 있을까?
<Subject title="Web" sub="world wide web!"></Subject>
이게 가능하려면 Subject 컴포넌트가 알아서 web을 title로 가져가고 world wide web을 sub로서 가져가야 함밑에 캡쳐처럼 subject 컴포넌트를 수정해주면 됨.
결과는 똑같으나 안에는 훨씬 효율적으로 바뀐 것을 알 수 있음!
이런 걸 바로! 리팩토링 했다 라고 함.
React 웹 확장 프로그램 -> https://reactjs.org/community/debugging-tools.html
웹에서 파악하는 태그 말고 리액트 컴포넌트 태그를 실제로 보고 싶을 때가 있을 것임.
이때 개발자 도구에서 elements 탭 말고 react 탭 클릭하면 더 자세히 볼 수 있음!
컴포넌트 별로 별도의 파일 만들기 (이전까진 App.js에 다 넣어놨었음)
- 내가 만들었던 TOC, Content, Subject 컴포넌트를 components/content.js 이런 식으로 별도의 디렉토리에 파일을 생성
- 각각의 컴포넌트 파일을 작성. 형식은 아래와 같음
import React, {Component} from 'react';
블라블라
컴포넌트내용
export default 컴포넌트이름;- 만든 컴포넌트들을 App.js에서 사용하게 되는데 App.js에서 추가해야할 import문 형식은 아래와 같음
import 컴포넌트 이름 from "컴포넌트 파일 디렉토리";'JAVASCRIPT > React' 카테고리의 다른 글
| [생활코딩 React 강의 4] 이벤트 설치해보기 (0) | 2019.05.18 |
|---|---|
| [생활코딩 React 강의 3] State란? state 사용해보기 (0) | 2019.04.26 |
| [생활코딩 React 강의 1] 컴포넌트란? && React 기본 앱 뜯어보기 && 배포해보기 (0) | 2019.04.24 |
| DOM조작 & react_router (0) | 2019.01.05 |
| 1_추가 내용 (0) | 2018.12.17 |
Comments