-
[React] component / props / stateFront-end/react 2023. 1. 17. 20:22
1. 컴포넌트 종류
함수형 컴포넌트
import React from 'react'; funcion App() { return ... } export default App;
클래스형 컴포넌트
import React, { Component } from 'react'; class App extends Component { render() { ... } } export default App;
🧐 두 방식의 차이점
함수형 컴포넌트는 메모리 자원, 결과물의 파일 크기 등이 클래스형 컴포넌트보다 작다는 장점이 있다.
But, 함수형 컴포넌트는 state와 라이플 사이클 API 사용이 불가하다 -> React v.16.8 이후 Hooks 기능으로 사용 가능해짐2. 코드 작성하기
함수형 컴포넌트
function 키워드 대신 () => {} 화살표 함수 문법 사용
import React from 'react'; const MyComponent () => { return <p> Hi </p> }; export default MyComponent;
🧐 일반 함수와 화살표 함수의 차이점
일반 함수: 자신이 종속된 객체를 this로 가리킴
화살표 함수: 자신이 종속된 인스턴스를 this로 가리킴
화살표 함수는 값을 연산해서 바로 반환해야 할 때 사용하면 가독성을 높일 수 있다
function twice(value) {
return value * 2;
}
const triple = (value) => value * 3;3. props
props란 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
JSX 내부에서 props 랜더링
name이라는 props 렌더링
props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다import React from 'react'; const MyComponent = (props) => { return <div> Hi, I'm {props.name} </div> }; export default MyComponent;
컴포넌트를 사용할 때 props 값 지정하기
import React from 'react'; import MyComponent from './MyComponent'; const App = () => { return <MyComponent name="React" />; }; export default App;
props 기본값 설정
: defaultPropsprops 값을 따로 지정하지 않았을 때 보여줄 기본값 설정
import React from 'react'; const MyComponent = (props) => { return <div> Hi, I'm {props.name} </div> }; MyComponent.defaultProps = { name: '기본 이름' }; export default MyComponent;
컴포넌트 태그 사이의 내용을 보여주는
: childrenprops 값을 따로 지정하지 않았을 때 보여줄 기본값 설정
import React from 'react'; import MyComponent from './MyComponent'; const App = () => { return <MyComponent>안녕하시렵니까</MyComponent>; }; export default App;
import React from 'react'; const MyComponent = (props) => { return <div> Hi, I'm {props.name} <br /> children 값은 {props.children} 입니다. </div> }; MyComponent.defaultProps = { name: '기본 이름' }; export default MyComponent;
비구조화 할당 문법을 통해 props 내부 값 추출하기
객체에서 값을 추출하는 문법
const { name, children } = props; 와 같은 문장을 추가하여 props 키워드를 일일이 쓰지 않아도 된다.
import React from 'react'; const MyComponent = (props) => { const { name, children } = props; return <div> Hi, I'm {name} <br /> children 값은 {children} 입니다. </div> }; export default MyComponent;
함수의 파라미터 부분에서 비구조화 할당 문법 사용하기
import React from 'react'; const MyComponent = ({name, children}) => { return <div> Hi, I'm {name} <br /> children 값은 {children} 입니다. </div> }; export default MyComponent;
propTypes를 통한 props 검증
컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 시 propTypes 사용
import React from 'react'; import PropTypes from 'prop-types'; const MyComponent = ({name, children}) => { return <div> Hi, I'm {name} <br /> children 값은 {children} 입니다. </div> }; MyComponent.propTypes = { name: PropTypes.string }; export default MyComponent;
4. state
state란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
🧐 props와의 차이점
props는 컴포넌트가 사용될 때 부모 컴포넌트가 설정하는 값이기 때문에, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꿀 수 있다.클래스형 컴포넌트의 state
import React, { Component } from "react"; class Counter extends Component { // 생성자 constructor(props) { super(props); // 생성자 작성 시 필수로 호출! // state의 초깃값 설정하기 this.state = { number: 0, }; } render() { const { number } = this.state; // 현재 state 조회: this.state return ( <div> <h1> {number} </h1> {/* button 태그 안에 onClick 값을 props로 넣어서 버튼 클릭 시 호출시킬 함수 설정 */} <button onClick={() => { this.setState({ number: number + 1 }); // setState(): state값 변경 }} > +1 </button> </div> ); } } export default Counter;
👍 state를 constructor에서 꺼내는 방법
class Counter extends Component {
state = {
number: 0,
fixedNumber: 0
};this.setState가 끝난 후 특정 작업 실행하기
setState의 두 번째 파라미터로 콜백 함수를 등록하여 작업을 처리할 수 있다
<button onClick={() => { this.setState( { number: number + 1, }, () => { console.log("방금 setState가 호출되었습니다"); } ); // setState(): state값 변경 }} >
함수형 컴포넌트의 state
👍 배열 비구조화 할당
배열 안에 들어있는 값을 쉽게 추출할 수 있도록 해주는 문법
const array = [1, 2];
const one = array[0];
const two = array[1];
const array = [1, 2];
const [one, two] = array;import React from "react"; import { useState } from "react"; const Say = () => { const [message, setMessage] = useState(""); const onClickEnter = () => setMessage("안녕하세요!"); const onClickLeave = () => setMessage("안녕히가세요!"); return ( <div> <button onClick={onClickEnter}>입장</button> <button onClick={onClickLeave}>퇴장</button> <h1>{message}</h1> </div> ); }; export default Say;
'Front-end > react' 카테고리의 다른 글
[React] 비동기(callback, promise, async/await) (0) 2023.01.23 [React] JSX 문법 사용 시 지켜야 할 규칙 (0) 2023.01.17 [React] State (0) 2022.08.10 [React] 댓글 컴포넌트 만들기 (0) 2022.08.08 [React] 시계 만들기 (0) 2022.08.08