[React/리액트] 리액트 기초 공부 #2 (feat.생활코딩)

(생활코딩 React 2022년 개정판의 총 10개의 강의 중 4~5편을 보고 작성하였다.)

 

컴포넌트 만들기

전 글에도 나왔듯이 리액트는 "사용자 정의 태그"를 만드는 기술이다.

 

사용자 정의 태그를 만들기 위해선 함수를 정의하면 된다.

리액트에서 사용자정의 태그를 만들 때는 *반드시 대문자로*시작해야 한다

 

 

사용자정의의 header태그를 만들어 보자

여기의 header를 리액트를 이용하여 사용자정의 태그 <Header>로 만들 것이다.

 

화면에는 이렇게 나오고 있는 상황

 

 

위에 Header라는 함수를 만든다.

return 값으로 아까 만들었던 header태그의 내용을 그대로 복사/붙여넣기한다.

 

header의 내용을 지우고, 방금 만들었던 사용자정의 태그인 Header를 입력해 주면

아까 만들었던 모습과 동일한 것을 볼 수 있다.

 

 

리액트에서는 이러한 사용자 정의 태그를 "컴포넌트"라고 부른다.

 

 

 

나머지 부분도 컴포넌트로 만들어 보자.

 

 

 

 

props

리액트는 속성을 props라고 부른다

아까 만들었던 Header의 타이틀을 바꾸고 싶다면 어떻게 하면 될까?

Header에다가 이와 같이 입력하고

생활코딩 유튜브 캡쳐

Header 함수에 파라미터로 props를 주고 console로 확인해 보면

props는 object라고 나와 있고,

title은 "REACT"라고 나와있는 것을 볼 수 있다.

 

그러면 title 값을 얻어내려면 어떻게 해야 할까?

props.title을 입력하면 오른쪽과 같이 REACT가 출력되는 것을 볼 수 있다.

 

이를

와 같은 형태로 입력해 주면

 

우리가 원하던 제목으로 나타나는 것을 볼 수 있다.

 

중괄호 안에 있는 내용은 표현식으로 취급되기 때문에,

안에 있는 내용이 props.title = REACT로 해석되어 나타나는 것이다.

 

이번에는 li들을 동적으로 만들어 보자.

Nav의 <li> 처리

먼저 App() 함수 안에 topics이라는 배열을 만들어 준다.

Nav 태그 안에는 topics={topics}을 입력.

그리고 위로 올라가서 Nav 함수 안에 빈 배열을 하나 추가해 준다. (const lis = [])

이 빈 배열에는 우리가 출력할 <li> 목록들을 넣어줄 것이다.

for 문을 이용하여 topics의 길이만큼 반복되게 할 것이고, let t라는 변수를 만들어 여기에 props.topics[i] 값을 대입해 준다. (topics 배열이 차례대로 대입됨)

빈배열 lis에다가 <li>{t.title}</li>의 형태로 push 해 주면, topics[i]의 title값이 대입되면서

lis = [<li>html</li>,<li>css</li>,<li>js</li>]가 넣어지게 될 것이다.

<ol>

{lis}

</ol>

와 같은 형태로 입력하면 lis가 차례대로 출력되게 될 것이다.

(설명을 넘 못한다..)

 

한번 for문을 map으로 바꿔보았다

일단 잘 출력되니 맞는 듯..?

 

a태그를 넣어줄 때도 동적으로 만들기 위해

{'/read/' +x.id}와 같은 형태로 만들어 준다.

 

 

근데 개발자 도구를 켜보면

이와 같은 경고가 뜨는 것을 볼 수 있다.

리액트는 자동으로 생성하는 태그의 경우, 리액트가 이 태그들을 추적해야 하는데,

추적의 근거로서 key라는 약속된 prop을 부여함으로써 성능을 높이고 정확한 동작을 하게 하는 것에 협조를 해줘야 한다고 한다.

그래서

이과 같이 고유한 값을 입력해주어야 한다.(아이디가 중복된다면 다시 오류가 날 것이다)