React : props에 대해 알아보자

props은 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터이다. 객체, 배열, 함수를 포함한 모든 JavaScript 값을 전달할 수 있다. props는 객체로 자식 컴포넌트에서 'props.이름'으로 접근이 가능하다. 자식 컴포넌트에서 props는 읽기 전용으로 props자체를 수정할 수 없다. 부모 컴포넌트에서 props를 변경하면 해당 props를 사용하고 있던 자식 컴포넌트는 리렌더링이 된다. 

 

props 사용하기

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 데이터가 문자열일 경우는 큰따옴표("")를 이용해서 전달이 가능하고 문자열 외의 값을 전달할 때는 중괄호({})를 이용한다.

• 부모컴포넌트 : 
  <자식컴포넌트명 속성명={전달할 데이터} />
  
  
• 자식컴포넌트 :
  • distructuring없이 props를 사용할 경우 함수에 props를 인자로 전달해야 한다. props는 객체로 자식 컴포넌트에서 props.속성명으로 접근이 가능하다.
    • function 자식컴포넌트명(props){}
  • distructuring을 사용할 경우 props를 인자로 전달하는 대신 변수를 함수의 인자로 전달하여 사용이 가능하다.
    • function 자식컴포넌트명({속성명1, 속성명2, ...}){}
      
      

부모컴포넌트 (App.jsx)

alertWelcome()함수의 경우 문자열이 아니므로 중괄호를 이용하여 전달한다.

import './App.css'
import Comp1 from './components/Comp1'

function App() {
  function alertWelcome(){
    alert("Welcome")
  }
  return (
    <Comp1 name="코딩쥐" url="coding-ji.tistory.com" handleWelcome={alertWelcome}/>
  )
}

export default App

자식컴포넌트 (Comp1.jsx)

props 사용

function Comp1(props) {
    return (
        <>
            <h1> 안녕하세요. {props.name} </h1>
            <p> 코딩쥐의 주소 : {props.url}</p>
            <button onClick={props.handleWelcome}>버튼</button>
        </>
    )
}

export default Comp1;

 

구조분해할당(distructuring) 사용

function Comp1({name, url, handleWelcome}) {
    return (
        <>
            <h1> 안녕하세요. {name} </h1>
            <p> 코딩쥐의 주소 : {url}</p>
            <button onClick={handleWelcome}>버튼</button>
        </>
    )
}

export default Comp1;

 

props를 콘솔창을 통해 확인해 보면 해당 자식 컴포넌트가 부모 컴포넌트에서 가지고 있는 속성들로 이루어진 객체인 것을 확인할 수 있다.

---

props 기본값 지정하기

값이 지정되지 않았을 때 prop에 기본값을 주기를 원한다면 여러 방법이 있다. 

 

1. defaultProps 사용

function Comp1({name, url, handleWelcome}) {
    return (
        <>
            <h1> 안녕하세요. {name} </h1>
            <p> 코딩쥐의 주소 : {url}</p>
            <button onClick={handleWelcome}>버튼</button>
        </>
    )
}

Comp1.defaultProps = {
    name: "코딩쥐",
    url : "coding-ji.tistory.com",
    handleWelcome : () => {alert("Welcome")}
}

export default Comp1;

 

2. default parameter 사용

변수 바로 뒤에 "="로 기본값을 작성하여 설정할 수 있다. 

const defaultHandler = () => {
    alert("Welcome");
};

function Comp1({ name="코딩쥐", url="coding-ji.tistory.com", handleWelcome = defaultHandler}) {

    return (
        <>
            <h1> 안녕하세요. {name} </h1>
            <p> 코딩쥐의 주소 : {url}</p>
            <button onClick={handleWelcome}>버튼</button>
        </>
    );
}

export default Comp1;

 

3. || (or 연산자) 사용

function Comp1({ name, url, handleWelcome }) {
    const defaultHandler = () => {
        alert("Welcome");
    };

    return (
        <>
            <h1> 안녕하세요. {name || "코딩쥐"} </h1>
            <p> 코딩쥐의 주소 : {url ||  "coding-ji.tistory.com"}</p>
            <button onClick={handleWelcome || defaultHandler}>버튼</button>
        </>
    );
}

export default Comp1;

---

props를 통한 state값 연동

React에서 props를 사용하여 부모 컴포넌트의 state 값을 자식 컴포넌트에 전달하는 것은 일반적인 패턴이다. 우선 부모 컴포넌트에서 'state'를 정의하고, props를 통해 자식 컴포넌트에 전달한다. props를 통해 자식 컴포넌트는 이 값에 접근하여 사용할 수 있다. 부모 컴포넌트에서 state를 업데이트하면 자식 컴포넌트에 전달되는 props도 자동으로 업데이트된다. 

 

아래 예제는 App 컴포넌트에 text라는 상태를 정의하고 관리하는 state가 있고, 이 state를 Comp2에 전달한다. Comp2의 입력필드에서 값이 변경될 때 setText를 호출하여 text의 상태가 업데이트가 되고, App(부모 컴포넌트)에서 state가 업데이트가 되면서 리렌더링이 발생한다. 

props.children

컴포넌트 내부에 다른 컴포넌트를 포함해야할 경우가 있다. 이때 부모-자식관계로 포함관계가 설정이 되는데, 부모 컴포넌트 내부에 있는 자식 컴포넌트들은 'props.children' 을 통해 접근이 가능하다. 

 

아래 처럼 <Comp1> 부모 컴포넌트 안에 있는 <Comp2> 컴포넌트에 대한 접근을 위해서 Comp1에서 {props.children}을 사용한 모습을 볼 수 있다.

 

---

props의 조건부 렌더링

'props'를 사용한 조건부 렌더링은 특정 조건에 따라 컴포넌트 일부 또는 전체를 렌더링 할 수 있도록 하는 패턴이다. 삼항연산자, AND연산자(&&) 혹은 조건부 렌더링 로직을 별도의 함수로 작성하여 조건부 렌더링을 시행 할 수 있다. 조건부 렌더링을 통해 데이터가 유효한지, 또는 특정 조건이 만족되는지 검증할 수 있다.

 

삼항연산자

조건에 따라 두 가지 경우 중 하나를 선택하여 렌더링한다. 

function Comp1({ id }) {

    return (
        <>
            {id ? <p>반갑습니다. {id}님</p> : <p>아이디가 확인되지 않았습니다.</p>}
        </>
    );
}

export default Comp1;

 

왼쪽은 <Comp1 id="코딩쥐"/>, 오른쪽의 경우 <Comp1/>일 때 표시되는 화면이다. 

 

AND연산자

AND연산자(&&)를 사용하면 조건이 'true'일 때만 특정 요소를 렌더링할 수 있다. 

function Comp1({ message }) {

    return (
        <>
            {message && <p>{message}</p>}
        </>
    );
}

export default Comp1;

 

조건부 렌더링 함수

복잡한 조건부 렌더링 로직을 함수로 분리하여 관리한다. 코드의 가독성과 재사용성을 높일 수 있다. 

function Comp1({ name }) {
    const renderContent = () => {
        if (name === '코딩쥐') {
            return <p>안녕하세요, 코딩쥐님</p>;
        } else if (name === 'codingji') {
            return <p>Hello, codingji</p>;
        } else {
            return;
        }
    };

    return (
        <div>
            {renderContent()}
        </div>
    );
}

export default Comp1;

 

왼쪽은 <Comp1 id="코딩쥐"/>, 오른쪽의 경우 <Comp1 id="codingji"/>일 때 표시되는 화면이다. 아무것도 작성하지 않으면 화면에 아무것도 뜨지 않는다.

---