[React] Props

복습

https://shins99.tistory.com/68

[React] export default

---

Props

---

props(properties)

- props는 함수에서 인수(argument)의 개념과 비슷하게 이해가능

- 컴포넌트에 데이터를 전달하고자 할 때 사용

(전달된 값은 변수를 통해 참조 가능)

- props의 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 가능

---

props 설정하고 사용하기

- React에서 props를 설정하는 방법은 HTML 요소에 속성을 설정하는 문법과 동일

const Laptop = (props) => {
  return <h1>내 노트북은 {props.brand} 노트북입니다.</h1>;
};
 
const App = () => {
  return <Laptop brand="Samsung" />;
};
 
export default App;

 

- props의 이름은 컴포넌트 자체의 관점에서 짓는 것을 권장합니다.

- 전달된 props를 사용하는 방법:  자바스크립트 함수에 인수를 전달하는 문법과 동일

- 객체 형태로 전달되기 때문에 props의 값을 참조하기 위해서 자바스크립트의 속성 접근자(.) 사용

 

return <h1>내 노트북은 {props.brand} 노트북입니다.</h1>;

 

- 화살표 함수를 사용할 때 인수가 하나 밖에 없을 경우에는 인수를 감싸는 소괄호(())를 생략가능

(인수가 하나도 없을 때에는 소괄호 생략 불가)

---

props로 여러 데이터 전달하기

 

const Laptop = (props) => {
  return (
    <>
      <h1>내 노트북은 {props.brand} 노트북입니다.</h1>
      <h2>내 노트북의 OS는 {props.os} 입니다.</h2>
    </>
  );
};
 
const App = () => {
  return <Laptop brand="Samsung" os="Windows" />;
};
 
export default App;

 

 

- 불필요하게 중복되는 코드를 줄이기 위해 ES6 문법부터 추가된 구조 분해 할당(destructuring assignment) 구문 사용

- 구조 분해 할당 구문: 

배열로부터 값, 객체로부터 속성을 해체 -> 그 값을 개별적인 변수에 각각 저장할 수 있게 해 주는 자바스크립트 표현식

- 구문을 사용시 props를 참조하기 위해 사용되는 중복 코드 양을 줄여 가독성이 좋아지고 간결한 코드를 작성가능

 

const Laptop = ({ brand, os }) => {
  return (
    <>
      <h1>내 노트북은 {brand} 노트북입니다.</h1>
      <h2>내 노트북의 OS는 {os} 입니다.</h2>
    </>
  );
};
 
const App = () => {
  return <Laptop brand="Samsung" os="Windows" />;
};
 
export default App;

 

---

defaultProps로 기본값 설정하기

- 부모 컴포넌트 App 컴포넌트에서 os라는 이름의 props 설정을 놓쳤다면 어떤 결과가 나올까?

- 자식 컴포넌트 Laptop 컴포넌트에서 os라는 이름의 props가 전달될 것을 예상하고 해당 데이터를 참조

 -> 부모 컴포넌트로부터 해당 데이터가 전달되지 않았기에 다음과 같이 해당 부분 공백으로 표시

렌더링 결과

내 노트북은 Samsung 노트북입니다.

내 노트북의 OS는 입니다.

 

- 자식 컴포넌트에 defaultProps를 미리 설정해 놓으면 부모 컴포넌트가  props를 설정하지 않았을 경우 기본적으로 defaultProps의 값을 사용

 

const Laptop = ({ brand, os }) => {
  return (
    <>
      <h1>내 노트북은 {brand} 노트북입니다.</h1>
      <h2>내 노트북의 OS는 {os} 입니다.</h2>
    </>
  );
};
 
Laptop.defaultProps = {
  brand: "LG",
  os: "Linux"
};
 
const App = () => {
  return <Laptop brand="Samsung" />;
};
 
export default App;

 

---

children으로 태그 사이의 내용 참조하기

React 컴포넌트의 시작 태그와 종료 태그 사이의 내용(문자열, 자식 엘리먼트 등)을 참조방법 :

(children props를 사용)

 

const Wrapper = (props) => {
  return <h1>{props.children}</h1>;
};
 
const App = () => {
  return <Wrapper>Hello, World!</Wrapper>;
};
 
export default App;

 

 

- 컴포넌트를 작성시 어떤 자식 엘리먼트를 포함하게 될 지 미리 예측하는 것이 어려움

(자식 엘리먼트를 직접 활용하기 힘든 경우 자주 발생)

- children props를 활용하면 React 엘리먼트를 유연하게 다룰 수 있게 됨

(좀 더 효율적으로 컴포넌트 재사용 가능)

 

const Laptop = (props) => {
  return <h1>내 노트북은 {props.brand} 노트북입니다.</h1>;
};
 
const Wrapper = (props) => {
  return <h1>자식 엘리먼트의 갯수는 {props.children.length}개 입니다.</h1>;
};
 
const App = () => {
  return (
    <Wrapper>
      <Laptop brand="Samsung" />
      <Laptop brand="LG" />
    </Wrapper>
  );
};
 
export default App;

 

---

props는 읽기 전용

- props는 부모 컴포넌트에서 그 값을 설정 -> 자식 컴포넌트에서는 해당 props를 읽을 수 밖에 없음(수정불가)

(해당 props의 값을 변경하고 싶다면 부모 컴포넌트에서 그 값을 다시 설정)

 

순수 함수(pure function) : 함수 중에서 동일한 입력값에 대해 언제나 동일한 결과를 반환하는 함수

 

순수 함수의 예시

function Add(a, b) {
  return a + b;
}

 

비순수 함수(impure function) :  동일한 입력값을 받아도 변수 c에 따라 결과값이 달라질 수 있는 함수

 

비순수 함수(impure function)의 예시

 

let c = 5;
function Add(a, b) {
  return a + b + c;
}