코드스테이츠 소프트웨어엔지지어링 부트캠프 +26일

리액트 Props와 State

Props : 컴퍼넌트의 속성(Property)이다.

외부에서 전달받는 값으로 컴퍼넌트 내부에서 변하지 않는 값이다.(immutable)

부모 컴퍼넌트에서 전달받은 값이다. (React는 하향식 데이터 흐름원칙을 갖고 있다.)

 

props전달방법

1. props 매개변수 사용

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};


function App() {
  return (

  <div>
   <Child text = 'name'/>
  </div>
  );
}

export default App;

props 는 객체이다. 이 객체의 { key : value } 는 <Parent> 컴포넌트에서 정의한 { attribute : value } 의 형태를 띈다. 따라서 JavaScript 에서 객체의 value 에 접근할 때 dot notation 을 사용하는 것과 동일하게 props 의 value 또한 dot notation 으로 접근할 수 있다. 아래와 같이 props.text를 JSX에 중괄호와 함께 작성하면 잘 작동한다.

 

2. props.children

props를 전달하는 또다른 방법으로 여는 태그와 닫는 태그 사이에 value를 넣어 전달할 수 있다.

import './App.css';
import React, { useState } from 'react';

function Child(props) {
  return (
    <div className="child">
      <p>{props.children}</p>
    </div>
  );
};


function App() {
  return (

  <div>
   <Child>안녕하세요</Child>
  </div>
  );
}

export default App;

 

 

State : 컴퍼넌트의 상태

컴퍼넌트 내부의 상태, 내부에서 변할 수 있는 값이다.(mutable)

state가 변경되면 컴퍼넌트는 새롭게 호출되고 렌더링된다. (리렌더링)

 

• useState : React에서 state를 다루는 방법중 하나이다.

예를들면 js에서는 배열을 변경할때 arr.push(x) 이런 식으로 변경하였지만, react에서는 useState를 이용한다.

 

const [state저장변수,state갱신변수] = useState(state 초기값);
----------------------------------------------------
function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
  //[state저장하는 변수,state를 변경하는 함수] = useState(isChecked의 초기값은 false)///

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
 //isChecked의 값을 event.target.checked로 변경한다.///
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
      {/*3항연산자, A ? B:C   , A가 true면 B, false면 C*/}
    </div>
  );
}

 

리엑트에서의 Event처리

• 소문자대신 camelCase사용
• JSX사용하여 문자열이 아닌 함수로 전달

---

리액트는 페이지 단위가 아닌 컴퍼넌트 단위이다.

데이터 흐름은 상-> 하 단방향이다.