[React 기본] 4. props

 

 

 

 

개인 공부 후 자료를 남겨놓기 위한 목적이므로,
생략되거나 오류가 있을 수 있음을 알립니다.
설명에 대한 지적은 언제나 환영입니다. :)

 

 

이 포스팅은 이전의 컴포넌트에 관한 포스팅과 이어집니다.

2022.07.07 - [Develop/react] - [React 기본] 3. 컴포넌트 만들기

 

 

---

props

인터넷에 쳐보면 나오는 props의 기본적인 의미는 하위 컴포넌트에 구성요소를 전해줄 때 사용하는 인자라고 설명한다.

 

prop은 property(속성)의 약자로 상위 컴포넌트가 하위 컴포넌트에게 값을 전달하는 인자이다.

 

특성으로는 단방향 흐름을 가진다는 특징을 가진다.

 

예제를 통해 props를 어떤 식으로 사용하고 다루어야 하는지 알아보자.

 

 

---

다음의 코드에서

 

우리가 미리 만들어 놓은 컴포넌트 Header에 title이라는 속성을 만들어 놓고,

 

해당 title의 값이 바뀜에 따라 Header의 값( 현재는 WEB )이 바뀌도록 만들고 싶다고 하자.

 

 

 

이를 위해 일단 Header에 title이라는 속성을 만들어주고, 값으로 REACT를 넣어주었다.

 

 

여기서 props가 등장하게 된다.

 

컴포넌트는 props는 값을 받게 되고, 이를 console.log를 통해 어떤 값을 가지고 있는지 직접 봐보자.

(일반적으로 props라는 이름으로 적고 사용한다. 굳이 사용한다면 다른 값을 넣어도 된다.)

 

 

props는 오브젝트로 해당 오브젝트는 title에 REACT라는 값을 가지는 것을 확인할 수 있다.

 

console

 

이제 props가 어떤 데이터를 가지고 있는지 확인했으므로,  우리가 원래 하고자 했던 계획은 데이터바인딩을 이용하면 쉽게 실현할 수 있다.

 

 

마찬가지로 이와 같은 방식을 사용하여 Article 또한 코드를 수정해보자.

 

 

 

 

---

이제 nav로 눈길을 돌려보자.!

 

하드코딩으로 만들어진 Nav

 

Nav 컴포넌트의 경우 같은 li 태그가 반복되는 것을 볼 수 있는데, 만약 이 li 태그가 수십개가 있다면 수정하기가 매우 곤란할 것이다. ( 값을 가진 배열등을 사용하면 훨씬 쉽게 수정할 수 있게 될 것이라는 의미)

 

따라서 props와 for문을 이용하여 해당 코드를 더욱 개발자답게 바꾸어 보자.

 

 

 

배열로 데이터를 가지고 있고, 이를 props를 통해 Nav에 넘겨줄 것이다.

 

배열로 데이터를 가지고 있고, 이를 데이터 바인딩을 통해 Nav에게 넘겨주었다.

 

Nav에서 props로 넘어온 데이터를 확인하기 전에,

 

현재 3개의 li로 표현된 코드를 어떻게 데이터 바인딩으로 간편히 표현할지 생각해보자.

 

각 태그를 배열에 담고, 데이터 바인딩을 통해 한번에 표현할 수 있을 것이다.

 

위의 코드를 참고하여  props로 들어오는 데이터들을 다시 정렬해 lis에 담아주는 과정을 만들어보자.

 

li 태그를 만들어 lis 배열에 넣어주는 과정

 

여기서 조금만 더 확장을 해본다면 (a태그도 함께 넣어보기)

 

props를 이용하여 a 태그까지 만들어보기

 

이제 제대로 작동하는지 확인해보자.

 

브라우저를 열고 콘솔창을 확인해보면 오류가 뜨는 것을 확인할 수 있는데,

 

이는 for문 같이 자동으로 생성한 태그의 경우에는 리액트 자체에서 추적에 필요한 "key" 가 필요하므로 

 

key가 없어 발생하는 오류이다. 이를 해결하기 위해서는 key라는 속성을 추가해 주면 된다.

 

(해당 속성을 중복되서는 안되기 때문에 보통 id 값과 같은 고유 값을 이용한다.

 

key가 없어 오류가 발생한 모습

 

 

li 태그에 key을 넣어주어 디버깅을 한 코드이다.

 

 

---

 

해당 필기는 생활코딩의 react 강의를 기반으로 작성하였으며,

https://opentutorials.org/course/4900

React - 생활코딩

 

그외 추가적으로 정보를 찾아 추가해주었습니다. 

 

강의를 들어보고 싶으신 분들은 위 링크로 넘어가주시면 감사하겠습니다. :)