[React JS] Props

props는 일종의 방식이다. 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법

여기 두 컴포넌트가 있다

두 컴포넌트는 같은 style을 가진다.

<script type="text/babel">
        // 컴포넌트
        function SaveBtn(){
            return <button style={{
                backgroundColor: "skyblue",
                color: "white",
                padding: "10px 20px",
                border: 0,
                borderRadius: 10
            }}
            >
            Save Changes</button>;
        }
        function ConfirmBtn(){
            return <button style={{
                backgroundColor: "skyblue",
                color: "white",
                padding: "10px 20px",
                border: 0,
                borderRadius: 10
            }}
            >
            Confirm</button>;
        }
        function App(){
           
            return (
                <div>
                    {/* JSX 내부 - 함수를 부름 (함수형 컴포넌트)*/}
                    <SaveBtn/>
                    <ConfirmBtn/>
                </div>
            );
        }

이 style을 재사용하기 좋게 만드려고한다.

<img src="">

우리는 이런 구문을 많이 썼다. img태그 정보를 전송하는 것 같았다.

syntax를 커스텀 컴포넌트에 똑같이 적용해 볼 수 있다. 이게 바로 우리가 데이터를 전달시킬 수 있는 방법이다. 컴포넌트를 설정하고 또 재사용할 수 있다. 이제 우리는 새로운 정보를 Btn 컴포넌트에 전송할 것이다.

우리가 만들고 사용하는 모든 컴포넌트는 () 이런 소괄호로 인자를 받는다는 것이다.

리액트가 넣어준다. 이 인자 이름을 props라고 부른다. Btn으로부터 전달 받는 properties이다.

재사용하는 컴포넌트로 코드를 수정했다.

<script type="text/babel">
// 컴포넌트
  function Btn(props) {
      console.log(props);
      return <button style={{
          backgroundColor: "skyblue",
          color: "white",
          padding: "10px 20px",
          border: 0,
          borderRadius: 10
      }}
      >
          {props.propstext}
      </button>;
  }

  function App() {

      return (
          <div>
              {/* JSX 내부 - 함수를 부름 (함수형 컴포넌트)*/}
              <Btn propstext="Save" />
              <Btn propstext="Continue" />
          </div>
      );
  }
  const root = document.getElementById("root");
  ReactDOM.render(<App />, root);
</script>

console.log 결과를 보면 두 object가 찍히는데 왜냐하면 Btn 을 두번 불렀기 때문이다.

Btn이라는 이름의 함수를 부르고 있고 정보를 함수에 전송하고있다.

React는 우리가 넣어둔 모든 것들을 첫 번째 인자로써 넣어준다.

정리하자면,

React 는 자동으로 내가 <Btn propstext="Continue" /> 여기에 넣는 모든 property(prop)들을

모두 오브젝트 안으로 넣고 이 오브젝트는 컴포넌트의 첫번째 인자로 주어진다. object이기 때문에 키-값이 여러개 들어가도 당근 가능이다.

props는 첫 번째이자 유일한 Btn이 전달 받는 인자이다.

props.propstext 대신 이렇게 써도 된다.

props는 오브젝트이기 때문에 {} 중괄호를 써줘야한다.

function Btn({propstext}){ 
  return <button style={{
            backgroundColor: "skyblue",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10
            }}
            >
            {propstext}
        </button>;
}

이렇게도 조건문에 적용가능 하다.

<!DOCTYPE html>
<html lang="en">
    ...
    
    <script type="text/babel">
        // 컴포넌트
        function Btn({propstext, big}){
            console.log(propstext, big);
            fontSize: big ? 18 : 16,
            >
            {propstext}
            </button>;
        }
        
        function App(){
            return (
                <div>
                    {/* JSX 내부 - 함수를 부름 (함수형 컴포넌트)*/}  
                    <Btn propstext="Save" big={true}/>
                    <Btn propstext="Continue" big={false}/>
                </div>
            );
        }
        ...
    </script>
</html>

props에 뭘 더 넣을 수 있을까?

- true,false 가능 string도 가능 함수도 가능하다.

부모컴포넌트가 state를 변경할 때 무슨 일이 일어나는지도 보자.

- Btn에 onClick function 달아주기

이 onClick function으로 App 컴포넌트에 있는 state를 바꿔볼 것이다.

Btn으로 들어가는 props들 중 onClick은 실제 이벤트리스너는 아니다. 지금은 prop 이름 일 뿐!

헷갈리지 않게 다시 이름을 바꿔주었다.

부모 컴포넌트의 state가 변경될 때 부모 컴포넌트에 속한 컴포넌트 모두가 새로 그려진다.

버튼하나만 내용이 바뀌는데 continue 라고 적힌 컴포넌트도 같이 리렌더링된다.

우리는 이 컴포넌트가 다시 그려지는 것을 원하지 않는다고 react에게 말할 수 있다.

이것을 React Memo라고 부른다.

우리는 이 컴포넌트가 다시 그려질지 말지를 결정할 수 있다.

prop가 변경되지 않는 한에서!!!!

첫 번째 버튼의 props는 바뀔 것이다.

아래 props는 절대 바뀌지 않을 것이다. - 우리는 react에게 rerender를 멈추라고 말할 수 있다.

React Memo

- 코드성능면에서 좀 더 효율적이다.

'WEB > Front-End🌝' 카테고리의 다른 글

error:03000086:digital envelope routines::initialization error' (0)	2021.12.04
[React JS] Props type (0)	2021.12.04
[React JS] JSX 알아보기 (0)	2021.12.02
[React] 마지막 정리 (0)	2021.10.16
[React] Delete 구현 (0)	2021.10.16

공부기록

[React JS] Props

'WEB > Front-End🌝' 카테고리의 다른 글

티스토리툴바

[React JS] Props

'WEB > Front-End🌝' 카테고리의 다른 글

관련글

티스토리툴바