드림오구
article thumbnail
Published 2023. 3. 27. 20:50
🌙 [React] 컴포넌트 🐣 STUDY/React

1. 🌊 컴포넌트

 

1.1. 클래스형 컴포넌트과 함수형 컴포넌트

클래스형 컴포넌트

  • 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다.
  • 임의의 메서드를 정의할 수 있다.
<javascript />
import React, { Component } from 'react'; export default class App extends Component { render() { const name = 'ogu'; return <div className="react">{name}</div>; } }

 

함수형 컴포넌트

  • 클래스형 컴포넌트보다 선언하기 훨씬 편하다.
  • 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다.
  • 결과물의 파일 크기가 더 작다
  • state와 라이프사이클 API사용이 불가능하다는 단점이 있었으나 v16.8 업데이트 이후 Hooks 기능이 도입되면서 해결되었다.
<javascript />
import React from 'react'; export default function App() { const name = 'ogu'; return <div className="react">{name}</div>; }

 

1.2. props

: 컴포넌트 속성을 설정할 때 사용하는 요소. 

 

1.2.1. props 기본값 설정 : defaultProps

<javascript />
import React from 'react'; export default function MyComponent(props) { return ( <div>안녕, 내 이름은 {props.name}이야</div> ); }; MyComponent.defaultProps = { name : '기본 이름 ' }

 

1.2.2. 비구조화 할당 문법을 통해 props 내부 값 추출

<javascript />
import React from 'react'; export default function MyComponent(props) { const {name} = props; // 변수 선언을 하여 객체에 props를 할당해주어 props.name을 호출하지 않고 name만 호출되게 한다. return ( <div>안녕, 내 이름은 {name}이야</div> ); }; import React from 'react'; export default function MyComponent({name}) { // 매개변수에 props 대신 객체를 넣어 props.name을 호출하지 않고 name만 호출되게 한다. return ( <div>안녕, 내 이름은 {name}이야</div> ); };

 

 

1.3. state

: 컴포넌트 내부에서 변할 수 있는 값. 

props는 컴포넌트가 사용 되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. 

 

함수형 컴포넌트에선 useState를 사용한다.

useState 함수를 호출하면 배열이 반한돠며, 배열의 첫 번쨰 요소는 현재 상태이며 두 번쨰 요소는 상태를 바꿔 주는 함수(세터 함수)이다.

 

state 사용시 주의사항

state 값을 업데이트 할 때는 꼭 세터 함수를 사용한다. 

 

 

'🐣 STUDY > React' 카테고리의 다른 글

🌙 [React] Hook - useEffect  (2) 2023.04.17
🌙 [React] Hook - useState  (2) 2023.04.17
🌙 [React] 이벤트 핸들링  (2) 2023.04.03
🌙 [React] JSX 문법  (3) 2023.03.26
🌙 [React] 리액트 시작하기  (3) 2023.03.26
profile

드림오구

@드림오구