HTML로 코딩을 했을 때 겪게 되는 문제점들은
1. 반복되는 코드들
2. 코드가 길어질수록 한 눈에 들어오지 않음
3. 코드를 감출 수 없음
과 같은 문제점들이 있다.
리액트는 HTML에서 생기는 문제점들을 보완하고자 만들어졌다.
리액트의 장점
1.코드의 간결화와 재사용성
<body>
<header>
<h1>WEB</h1>
world wide web!
</header>
</body>우리가 만약 이러한 코드를 html에서 만들었다고 했을 때
리액트는
import React, { Component } from 'react';
import './App.css';
class Subject extends Component {
rendor(){
return(
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
</div>
);
}
}
export default App;Subject 클래스를 만들어서 return 안에 html 에서 작성했던 코드를 넣어주고
우리가 화면에 출력하려고 하는 App 안에 <Subject></Subject> 로 넣어주면 된다.
이렇게 보면 리액트가 오히려 HTML 보다 가독성도 낮고 효율적이지 않다고 생각할텐데,
하지만 만약
<body>
<header>
<h1>WEB</h1>
world wide web!
</header>
</body>
<body>
<header>
<h1>WEB</h1>
world wide web!
</header>
</body>
<body>
<header>
<h1>WEB</h1>
world wide web!
</header>
</body>
....1000번이처럼 한 코드가 몇 백 번 사용하게 된다면 코드가 엄청 길어질 것이다.
이 때 리액트는
import React, { Component } from 'react';
import './App.css';
class Subject extends Component {
rendor(){
return(
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
<Subject></Subject>
<Subject></Subject>
....1000번
</div>
);
}
}
export default App;코드 전체를 써줄 필요없이 <Subject></Subject> 이것만 쓰면 반복해서 쓸 수 있다.
따라서 리액트는 코드 재사용성과 코드 간결화 할 때 매우 효율적이다.
<body>
<header>
<h1>WEB</h1>
world wide web!
</header>
<article>
<h2>HTML</h2>
React, HTML
</article>
</body>이처럼 header 뿐만 아니라 article 과 같이 한 번에 여러 코드를 출력하고 싶다면
import React, { Component } from 'react';
import './App.css';
class Subject extends Component {
rendor(){
return(
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
}
class Article extends Component {
rendor(){
return(
<article>
<h2>HTML</h2>
React, HTML
</article>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
<Article></Article>
</div>
);
}
}
export default App;아까와 같은 방식으로 class 를 생성해준 다음 App 에 넣어주면 된다.
리액트는 props 라는 효율적인 기능이 있다.
<body>
<header>
<h1>WEB</h1>
world wide web!
</header>
<header>
<h1>CSS</h1>
CSS is web
</header>
</body>만약 구조는 같은데 내용이 서로 다를 경우도 리액트는 props 를 가지고 처리할 수 있다.
import React, { Component } from 'react';
import './App.css';
class Subject extends Component {
rendor(){
return(
<header>
<h1>{this.props.name}</h1>
{this.props.sub}
</header>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject name = "WEB" sub = "world wide web! "></Subject>
<Subject name = "css" sub = "css is web! "></Subject>
</div>
);
}
}
export default App;<Subject name = "WEB" sub = "world wide web! "></Subject> 와 같이 subject 안에 출력하고 싶은 정보를 적은 다음 별명을 붙혀준다.
그리고 붙힌 별명을 위에 클래스 안에 props 로 전달할 수 있다.
하지만 만약 사용해야될 클래스가 많아진다면 또 다시 가독성이 어려워질 것이다.
그래서 리액트는 Component 파일들을 분리할 수 있도록 만들어놨다.
Subject.js 라는 파일을 만들어준 다음
import React, { Component } from 'react';
class Subject extends Component {
rendor(){
return(
<header>
<h1>{this.props.name}</h1>
{this.props.sub}
</header>
);
}
}
export default Subject;App.js 파일에는
import React, { Component } from 'react';
import './App.css';
import Subject from './components/Subject.js';
class App extends Component {
render() {
return (
<div className="App">
<Subject name = "WEB" sub = "world wide web! "></Subject>
<Subject name = "css" sub = "css is web! "></Subject>
</div>
);
}
}
export default App;import Subject from './components/Subject.js'; 만 붙혀주면 사용할 수 있다.
주의할 점은 export default Subject; 를 붙혀줘야 외부에서 호출할 수 있다.
리액트가 어려워서 겁이 많이 났었는데 강의가 너무 좋아서 쉽게 이해할 수 있었다.
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2023 신입부원 기초 스터디] 한승훈 5주차 - JS (0) | 2023.05.28 |
|---|---|
| [2023 신입부원 심화 스터디] 김윤희 #5주차 - React.js 섹션 2. 컴포넌트 제작 (0) | 2023.05.25 |
| [2023 신입부원 심화 스터디] 정호용 #5주차 react - section 0 ~ 2 (1) | 2023.05.25 |
| [2023 신입부원 심화 스터디] 황현진 #5주차 - React.js 섹션 2. 컴포넌트 제작 (1) | 2023.05.25 |
| [2023 신입부원 심화 스터디] 이정욱 #5주차 React.js ~ 섹션2 컴포넌트 제작 (0) | 2023.05.25 |
