컴커니어

React에서 하위 컴포넌트에 props를 전달해보자!

Ap.js ( 상위 컴포넌트 코드)

import React from "react";
import Under from "./Under";

function Ap() {
  return (
    <div>
      hi
      <Under />
    </div>
  );
}

export default Ap;

우선 하위 컴포넌트를 import 해야됩니다. 

Under.js(하위 컴포넌트 코드)

import React from "react";

function Under(props) {
  return <div>{console.log(props)}</div>;
}

export default Under;

아무것도 보내지 않았을때는 결과값으로 

이렇게 빈 객체를 가져옵니다!

그러면 상위컴포넌트에서 하위컴포넌트로 props로 보내고 그것을 하위컴포넌트에서 받는법을 알아봅시다.

두개의 방법으로 받아보겠습니다!

Ap.js(상위컴포넌트)

import React from "react";
import Under from "./Under";

function Ap() {
  return (
    <div>
      hi
      <Under name="hi" color="red" />
    </div>
  );
}

export default Ap;

Under.js(하위 컴포넌트)

import React from "react";

function Under(props) {
  return <div>{console.log(props)}</div>;
}

export default Under;

이렇게하면 결과값으로 props객체에 들어오게됩니다.

두번째 방법으로는 ES6문법을 이용해서 비구조화할당하는것입니다.!

import React from "react";

function Under({ name, color }) {
  return <div>{console.log(name, color)}</div>;
}

export default Under;

`이렇게 하면 비구조화할당을통해 name에는 바로 hi라는 문자열이 들어가고 color에 red가들어갑니다.

비구조화할당은 [a,b] = [3,4] 라면 a=3,b=3과같은 역할을하게됩니다.

결과가 이렇게 바로보이는것을 알수있습니다 ㅎㅎ

컴포넌트에 html태그에 클래스를 주고 싶어서 class="" 입력했다가 오류가났다.

Invalid DOM property `class`. Did you mean `className`?오류해결

원인)

jsx는 javascript이므로 class라고 입력하면 자바스크립트 class라고 생각하게된다.

이와같은 이유로 <label for="">이런 태그에 있는 for도 자바스크립트 반복문으로 생각하게된다.

해결)

class=>className

for =>htmlFor

React component를 렌더링할때 데이터를 화면에 표시하려면 표시하려는 데이터 타입에 맞는

데이터를 넣어주어야한다. 컴포넌트를 통해서 전달된 데이터와 표시하려는 데이터의 타입이 

일치해야만한다.

나의 경우는

배열데이터 객체를 넣어서 타입이 안맞아서 화면에 표시되지않았다.

또한

첫번째 인자에 모든 값이 다들어가서 에러는 찾는데에 시간을 많이 썼다..

이렇게 하위 컴포넌트인 Movie함수에  props를전달하였는데 이상하게 값이 전부

id에 들어갔다 객체의 형태로..

이유를 모르겠어서 왜그런가 생각해보니 이 예제로 알게되었다..

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" color="green"/>
  );
}

export default App;

hello.js

import React from 'react';

function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

export default Hello;

두개의 props를 전달하였는데 받는곳은 첫번째 인자에 다 들어간다!

그러면 어떻게 해결하는가??

-->비구조화 할당을 통해서 해결했다.

비구조화할당은 예제로 알아보자 비구조화할당으로 보면 

[a,b]=[3,4]   ==> a=3,b=4 

이거와 같다

이거를 사용해서 오류를 해결할수있었다!

이렇게 비구조화할당을하면 첫번째인자에 모든 정보가 들어가지 않아서 해결이 되었다!~~

클래스의 state 변경할때 직접변경하면 오류가 난다.

import React from "react";
import PropTypes from "prop-types";

class App extends React.Component {
  state = {
    count: 0,
  };
  add = () => {
    this.state.count = 1;
  };
  minus = () => {
    this.state.count = -1;
  };
  render() {
    return (
      <div>
        <h2>The number is :{this.state.count}</h2>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

 React에 있는 onClick을 통해서 add 버튼,minus버튼을 클릭하면 add,minus 버튼이 실행되도록 만들었다.

하지만 이런 오류가 뜬다.

Do not mutate state directly. Use setState()  react/no-direct-mutation-state

이 오류를 보니 직접적으로 변경하면 안된다고 나와있다. setState를 사용하라고한다.

왜?

react는 직접적으로 변경하면 render function을 다시 시작하지 않는다.

하지만 setState를 쓰면 react는 렌더함수를 다시 실행시키길 원한다는걸 알고있다.

setState를 호출할때마다 react는 새로운 state와 함께 render function을 실행시키는것이다!

그럼 수정해보자

import React from "react";
import PropTypes from "prop-types";

class App extends React.Component {
  state = {
    count: 0,
  };
  add = () => {
    this.setState((current) => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState((current) => ({ count: current.count - 1 }));
  };
  render() {
    return (
      <div>
        <h2>The number is :{this.state.count}</h2>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

 이렇게 변경하면 된다. current의인자를 통해서 접근한이유는 state에 의존하지 않기 위해서이다.

this.setState((current) => ({ count: current.count - 1 }));

이부분은 

this.setState({ count: this.state.count - 1 });

이렇게 바꿔도 react는 허용해주는데 이것은 state에 의존하기 때문에 위에코드로 바꿔주는것이 좋다.