[React] props 정리

props

• 하위 컴포넌트(자식)에 상위 컴포넌트(부모)에 있는 State 를 넣고 싶을 때??🤔

  그냥 State 사용 시 Scope가 달라서 쓸 수 없음

• 부모 ➡️ 자식 은 State 전송 가능

  이 때, props 를 사용✅

  props는 꼰대

  props 전송은 부모 ➡️ 자식 일때만 된다
  패륜전송 불륜전송 금지ㅎㅎ

props 사용법

• 부모 컴포넌트 내에 이렇게 작성

  <자식컴포넌트 넘겨줄param명 = {state명} />

• 자식 컴포넌트 선언 부에서 이렇게 작성

  props 파라미터 등록 후 props.넘겨받은param명 사용

        //부모
        {
            조건 ? <Modal color={'black'} 넘겨줄param명={state명}/> : null 
        }
        
        //자식
        const Modal = (props) => {
            return (
                <div style = {{background : props.color}}> //이런식으로 style을 넘겨 받을 수도 있음
                    <h4>{props.넘겨받은param명}</h4>
                </div>
            )
        }

• 보통 넘겨주는 State와 param명을 동일하게 작성하긴 함

• 컴포넌트 많아지면 State 공유 시 props 쓰는 게 많아지고 귀찮아진다는 단점

• props를 파라미터 문법 처럼 생각하면 됨

• props로 문자열, 함수명도 전송 가능

• 굳이 부모에만 state 를 저장해둘 필요는 없음
  근데 state 를 자식, 부모 모두 사용할 경우,
  사용하는 컴포넌트들 중 최상위 컴포넌트에다 만들어놔야함

  props 는 위에서 아래로만 전송이 가능하기 때문 ✅