[React] State, Props, Event

dnjstd·2021년 11월 21일
0
post-thumbnail

State

  • 화면에 나타나는 컴포넌트의 UI 정보
  • 컴포넌트의 상태값

컴포넌트 안의 요소에 상태값을 반영해서 데이터가 바뀔 때 마다 효율적으로 UI에 나타내기 위해 State를 설정한다.


import React, { useState } from 'react';

function State() {
	const [color, setColor] = useState('red');

	return (
      <div>
        <h1>Function Component | State</h1>
      </div>
  );
}

export defa
  • useState 함수를 import 한 후 사용해야 한다.
  • useState 함수는 function State()와 return문 사이에 작성한다.
  • useState 함수에 인자로 넣는 값은 초기값이다.
  • const [first , second] ← 배열의 첫번째 요소는 상태값, 두번째 요소는 상태값을 갱신하는 함수이다.
import React, { useState } from 'react';

function State() {
	const [color, setColor] = useState('red');
	
	return (
      <div>
        <h1 style={{ color: color }}>Function Component | State</h1>
	<button onClick={() => setColor('blue')}>Click</button>
      </div>
  );
}

export default State;

<button>에 onClick 이벤트가 발생하면, setColor함수가 실행되면서 color라는 상태값의 기본 값인 ‘red’가 ‘blue’로 변경된다.

Props

  • 부모 컴포넌트의 내부 state 값을 자식 컴포넌트에 전달하는 기능을 한다.
  • 컴포넌트의 속성값
  • 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이다.
  • props로 대부분의 자바스크립트 값을 모두 자식 컴포넌트에 전달할 수 있다.
    객체이다.
// Parent.js

import React, { useState } from 'react';
import Child from '../pages/Child/Child';

function Parent() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Parent Component</h1>
	<Child titleColor={color} />
    </div>
  );


export default Parent;

부모 컴포넌트 Parent에 자식 컴포넌트 <Child /> 를 import 후 나타낼 위치에 태그 형식으로 작성한다. 자식 컴포넌트의 props로 titleColor 속성을 생성하고 부모 컴포넌트의 state인 {color} 값을 전달한다.

Props 객체

// Child.js

import React from 'react';

function Child(props) {
	// console.log(props);

  return (
    <div>
      <h1 style={{color : props.titleColor}}>Child Component</h1>
    </div>
  );
}

export default Child;

Child 컴포넌트는 부모가 전달한 props를 인자로 받는다. props 데이터를 사용하기 위해서 props 객체의 특정 key값을 props.titleColor와 같은 형식으로 작성한다.

Props & event

props를 통한 event handler 전달

// Parent.js

import React, { useState } from 'react';
import Child from '../pages/Child/Child';

function Parent() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Parent Component</h1>
	<Child titleColor={color} changeColor={() => setColor('blue')} />
    </div>
  );


export default Parent;
// Child.js

import React from 'react';

function Child(props) {
  return (
    <div>
      <h1 style={{color : props.titleColor}}>Child Component</h1>
	<button onClick={props.changeColor}>Click</button>
    </div>
  );
}

export default Child;

<button>에 onClick 이벤트가 발생하면, props.changeColor를 실행한다. 이때 changeColor는 부모 컴포넌트로부터 전달받은 setColor=(’blue’)함수를 실행한다. 컴포넌트에 변경된 state 데이터 color 전달되고, props.titleColor를 색상으로 지정하는 h1 타이틀 색상이 변경된다.

profile
Frontend Engineer 🌱

0개의 댓글