컴포넌트
리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
리액트는 html과 js가 결합한 jsx 문법으로 명시적으로 코드를 작성 가능한데,
이 jsx문법으로 코드를 작성한 하나의 기능에 대한 코드 묶음이다.
컴포넌트의 장점으로는 서로 독립적이라 기능 자체에 집중하여 개발이 가능하며, 유지 보수도 용이하다.
그리고 재사용이 가능해서 활용성이 뛰어나다.
현재 컴포넌트는 함수 컴포넌트 클래스 컴포넌트가 존재한다.
클래스 컴포넌트
자바스크립트의 ES6문법인 class를 이용하여 컴포넌트를 선언한다.
현재 자주 사용하지 않지만, 사용하는 기업들이 있다. 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다.
선언방식
import React, {Component} from 'react';
class App extends Component {
render() {
const name = 'react';
return <div className="react">{name}</div>
}
}
export default App;
가장 중요한 핵심은 class 키워드가 필요한것이고,
리액트를 import 할때 Component를 상속 받아야 한다.
그리고 render() 메소드가 반드시 있어야 한다.
리액트에서는 자동으로 클래스 컴포넌트 내부에 있는 render 메소드를 실행시켜
화면에 코드를 렌더해준다.
함수형 컴포넌트
말 그대로 함수를 통해 컴포넌트를 선언한다.
컴포넌트를 정의하는 가장 간단한 방법이며, 최신 문법이라서 많이 사용한다.
선언방식
import React from 'react';
import './App.css';
function App() {
const name = 'react';
return <div className = "react">{name}</div>
}
export default App;함수 문법만 알고있다면 작성이 가능해서 클래스 컴포넌트에 비해 선언이 편하다.
함수형 컴포넌트는 클래스 컴포넌트의 state, lifeCycle 관련 기능 사용이 불가능 하였으나,
이는 이후 HOOK을 통해서 해결이 되었다.
state 사용
- 클래스형
클래스형 컴포넌트의 state는 객체 형식이다.
클래스 내부에 constructor 함수 내부에서는 this.state를 통해 초기 값을 설정 가능하다.
state = {} 형식을 통해서 class 내부에 바로 선언도 가능하다.
state 값에 접근하기 위해서는this.state.상태_이름형태로 접근한다.
import React, {Component} from 'react';
class App extends Component {
state = {
count: 0
};
render() {
return <div className="react">The number is : {this.state.count}</div>
}
}
export default App;- 함수형
이전에는 함수 컴포넌트에서는 state 사용이 불가능하였다.
이후 react hooks의 useState 함수로 해결되었다.
useState 함수를 호출하면 배열이 반환 되는데 첫 번째 인덱스는 현재 상태,
두 번째 인덱스는 상태를 바꿔 주는 함수이다.
usestate의 인자는 현재 상태의 초기값을 설정해주며, 입력된 값이 현재 상태에 할당 된다.
[현재_상태, 상태_변경_함수] = useState(초기값)
import React, { useState } from 'react';
import './App.css';
const [count, setCount] = useState(0)
function App() {
return <div className = "react">The number is : {count}</div>
}
export default App;상태 변경에 대해서는 따로 나눠서 작성...
props
컴포넌트의 정보 따위의 속성을 설정 할 때 사용하는 요소이며, 이를 부모 컴포넌트에서
자식 컴포넌트로 전달이 가능하다. 이때 props는 객체 형태로 전달된다.
props는 읽기 전용이며, 이를 수정해서는 안된다.
수정이 가능한것은 state만 가능하다.
- 클래스 컴포넌트 props
this.props.props_이름를 통해 값을 불러올 수 있다.
const {props_이름} = this.props;처럼 구조분해 할당으로도 접근 가능하다.
import React, {Component} from 'react';
class Favorite extends Component {
render() {
return <h1>저는 {this.props.fav}을 좋아합니다<h1>;
}
}
class App extends Component {
render() {
return (
<div className="react">
<Favorite fav="web"/>
</div>
);
}
}
export default App;- 함수형 컴포넌트 props
props를 불러올 필요 없이 인자로 받아온 props를 바로 사용 가능하다.
import React, { useState } from 'react';
import './App.css';
function Favorite ({fav}) {
return <h1>저는 {fav}을 좋아합니다.<h1>;
}
function App() {
return (
<div className = "react">
<Favorite fav="web"/>
</div>
);
}
export default App참고 사이트
https://velog.io/@sdc337dc/0.%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8#%ED%95%A8%EC%88%98-%ED%98%95
https://uriu.tistory.com/306
