React - props

2023.01.25 props

프로퍼티(props)란?

• 프로퍼티, props(properties의 줄임말) 라고 한다.

• 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.)

• 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)

  사용방법?

• 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다.

  props 사용해보기

  컨포넌트를 변경하지 않고 사용하는 태그별로 내용을 다르게 주고싶을때
  props를 사용한다.

  Header 변경

  Header title="REACT" 를 주고 이 title이 화면에 제공되었으면 좋겠다고 가정해보자.

  함수 Header에 첫번째 파라미터로 props를 준다.
  (이름은 아무거나할 수 있지만 props를 주기.)
  props를 확인해보면 Object로 title : "REACT" 를 가지고 있는것을 확인할 수 있다.
  

props.title을 하면 REACT를 얻을 수 있다.

return 구분 안에 { }를 넣으면 { }안에는 일반적 문자가 아니라
표현식으로 취급되어 해석되서 화면에 제공된다.

Article도 변경해보자.

Nav 변경

Nav도 props를 줘서 props에 주입된 값에 따라
li를 자동으로 만들어주게 변경해보자.

li정보를 자바스크립트의 데이터스트럭쳐에 맞게 바꿔야한다.

topics변수에 배열을 선언.
각각의 정보는 제목과 본문이 존재하고 각각의 id 값이 있기 때문에
객체에 담는다.

const topics = [
    {id:1, title: 'html', body:'html is...'},
    {id:2, title: 'css', body:'css is...'},
    {id:3, title: 'javascript', body:'javascript is...'},
  ]

topics를 Nav에 props으로 전달.

<Nav topics="topics"></Nav>

이렇게 하면 단순히 topics라는 문자열이 전달 되기 때문에
" " 를 { }로 감싸면 문자열이 아닌 데이터 그대로 전달된다.

<Nav topics={topics}></Nav>

Nav 컴포넌트 변경

Nav 컴포넌트에 첫번째 매개변수로 props 주고
lis 변수를 배열로 선언하고 li를 넣어준다.
그리고 return 값에 {lis}를 넣으면
리액트가 배열의 원소들을 하나씩 꺼내서 배치해준다.

function Nav(props){
   const lis = [
        <li><a href='/read/1'>html</a></li>,
        <li><a href='/read/2'>css</a></li>,
        <li><a href='/read/3'>js</a></li>
   ]
  return <nav>
      <ol>
        {lis}
      </ol>
    </nav>
}

li 들은 잘 나오지만 이것만으로는 쓸모가 없다.

props에 topics로 전달된 값을 받아서
동적으로 태그를 만들어서 배열에 담아주자.
for문을 이용해서 동적으로 태그를 만든다.

function Nav(props){
   const lis = [   ]
   for(let i=0; i<props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(<li><a href={'/read/'+t.id}>{t.title}</a></li>)
   }
  return <nav>
      <ol>
        {lis}
      </ol>
    </nav>
}

코드를 저장하고 실행한 후 개발자 도구를 확인해보면 아래와 같은 경고를 확인할 수 있다.

동적으로 만든 각각의 li태그는 유니크(반복문 안에서)한 key prop을 가져야한다.

li들마다 고유한 key={ }을 준다.

for(let i=0; i<props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a></li>)
   }

✨ key={ }
리액트는 자동으로 생성한 태그의 경우에는
리액트가 이 태그들을 추척할때 근거가 있어야한다.
그 근거로서 리액트에게 key라고 하는 약속된 prop을 부여함으로서
리액트가 성능을 높이고 정확한 동작을 하기 위해 협조하는 것이라고 생각하자.