* 이 포스트는 생활코딩 React강의를 기반으로 작성되었습니다 😊
1. Recat는 Javascript의 라이브러리이다.
2. JavaScript를 확장한 문법인 JSX를 사용한다. (즉, JavaScript는 아님)
3. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다.
4. 따옴표는 문자열 값에 사용하고, 중괄호는 표현식에 사용한다
4.1. JSX의 중괄호 안에는 모든 JavaScript 표현식을 넣 을 수 있다.
5. debugger; : 다음 코드를 작성해두면 브라우저에서 실행을 멈춰준다 (디버그!!)
⭐ props
- 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 넘겨줄 때 사용한다.
<Component props_name="props_value">
일반적으로 다음과 같이 사용하며, 상위 컴포넌트에서 위와 같이 정의한 뒤, 하위 컴포넌트에서 {this.props.props_name}으로 사용하면 된다.
import React, { Component } from 'react';
import './App.css';
class TOC extends Component {
render() {
return(
<nav>
<ul>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ul>
</nav>
);
}
}
class Content extends Component {
render() {
return(
<article>
<h2>{this.props.title}</h2>
{this.props.desc}
</article>
);
}
}
class Subject extends Component {
//class 안에 소속되는 함수는 function 생략 가능
render() {
return(
//컴포넌트를 만들 경우 하나의 최상위 태그로 시작되어야 한다
//여기서는 header가 최상위 태그
<header>
<h1>{this.props.title}</h1>
{this.props.sub}
</header>
);
}
}
//컴포넌트를 만드는 코드!!
//javascript가 아님 (jsx! 알아서 자바스크립트 코드로 컨버팅해준다)
class App extends Component {
render() {
return (
<div className="App">
<Subject title="WEB" sub="world wide web!"></Subject>
<Subject title="React" sub="For UI"></Subject>
<TOC></TOC>
<Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
</div>
);
}
}
export default App;
⭐ Component 파일로 분리하기
- 1. components 파일 생성 후(필수x) 원하는 이름의 자바스크립트 파일 생성
- Content.js 파일 코드
import React, { Component } from 'react';
class Content extends Component {
render() {
return(
<article>
<h2>{this.props.title}</h2>
{this.props.desc}
</article>
);
}
}
export default Content;
- 2. App.js에서 import후, 태그형식으로 사용!
import React, { Component } from 'react';
import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";
import './App.css';
//컴포넌트를 만드는 코드!!
//javascript가 아님 (jsx! 알아서 자바스크립트 코드로 컨버팅해준다)
class App extends Component {
render() {
return (
<div className="App">
<Subject title="WEB" sub="world wide web!"></Subject>
<TOC></TOC>
<Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
</div>
);
}
}
export default App;
⭐ Constructor
- constructor는 어떤 컴포넌트가 실행될 때 render함수보다 먼저 실행되면서 초기화를 담당하는 부분.
constructor(props){
super(props);
this.state = {
}
}
⭐ State
- props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, 컴포넌트 안에서 관리된다.
- state는 props의 값에 따라 내부 구현에 필요한 데이터로, 사용하는 쪽과 구현하는 쪽을 분리시켜 외부에서 알 필요가 없는 정보를 은닉할 수 있다.
- state객체를 사용하기 위해 render()함수보다 위쪽에 위치하는 constructor() 함수를 사용한다.
- state의 값이 바뀌면 그 state를 가지고 있는 component의 render함수가 다시 호출된다.
- App.js
constructor(props){
super(props);
this.state = {
subject:{title:'WEB', sub:'World Wide Web!'},
contents:[
{id:1, title:'HTML', desc:'HTML is for information'},
{id:2, title:'CSS', desc:'CSS is for design'},
{id:3, title:'JavaScript', desc:'JavaScript is for interactive'}
]
}
}
- 위에서 정의한 contents를 사용하는 TOC.js 파일
import React, { Component } from 'react';
class TOC extends Component {
render() {
var lists = [];
var data = this.props.data;
var i = 0;
while(i < data.length){
lists.push(<li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>)
i = i+1;
}
return(
<nav>
<ul>
{lists}
</ul>
</nav>
);
}
}
//TOC를 외부에서 사용할 수 있도록 하는 것
export default TOC;
⭐ props와 state의 차이점
- props는 read-only이며, 수정할 수 없다.
- state는 비동기적으로 변경할 수 있으며, setState를 통해 수정가능하다.
- props는 컴포넌트에 전달되는 것, state는 컴포넌트 안에서 관리되는 것
- 쉽게말하면 props는 사용자의 것, state는 구현자의 것 !
⭐ 자꾸 까먹어서 적어두는 쟈근 tip
- 서버 시작하기 : npm run start
- 서버 종료: ctrl + c
-컴포넌트의 이름은 대문자로 시작되어야 한다.