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

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

 

state

생활코딩 유튜브 강의 캡쳐

컴포넌트는 입력과 출력이 있고, 입력은 props이며 props를 통해서 입력된 데이터를

우리가 만든 컴포넌트 함수가 처리해서 리턴값을 만들면 그 리턴값이 새로운 UI가 됨

 

state는 prop과 함께 컴포넌트 함수를 다시 실행해서 새로운 리턴값을 만들어주는 또 하나의 데이터이다.

 

prop과 state의 차이점

prop은 컴포넌트를 사용하는 외부자를 위한 데이터

state 컴포넌트를 만드는 내부자를 위한 데이터

 

 

 

만들기

 

list를 클릭하면 상세페이지가 나오고,

로고를 클릭하면 Welcome페이지가 나오는 애플리케이션을 만들 것이다.

 

먼저 App 함수 안에 mode라는 상수를 하나 만든다.

 

그리고 content라는 변수를 만들고

이렇게 조건문을 만든다.

 

그리고 return값의 Article이 있던 자리에 content가 출력될 수 있도록 {content}의 형태로 작성한다

조건문에 의해 mode의 값이 'WELCOME'이냐 'READ'이냐에 따라 내용이 달라질 것이다.

 

mode의 값에 따라 달라지는 모습

 

이제 모드의 값을 이벤트가 발생했을 때 변경해 줄 것이다.

 

원래 alert가 있던 부분을 이렇게 바꿔준다.

하지만 페이지는 바뀌지 않는다.

App 함수는 한 번 밖에 실행되지 않기 때문에, mode의 값이 바뀌어도 리턴값은 그대로인 것이다.

바로 이 부분을 해결할 때 state를 사용한다.

 

 

 

먼저 state를 사용하기 위해서는 상단에

import {useState} from 'react'; 와 같은 형태로 임포트해 준다.

 

그리고

mode의 값을 useState()안에 넣어준다.

 

mode를 _mode로 바꾸고 콘솔로 출력해 보면 이렇게 뜬다.

0번째 원소는 초기값, 1번째 원소는 함수로 되어있다.

useState는 배열을 리턴하고,

0번째 원소는 상태의 값을 읽을 때 쓰는 거고

1번째 데이터는 그 상태의 값을 변경할 때 사용하는 함수이다.

 

mode를 통해 상태값 읽고

setMode를 통해 mode의 값을 바꿀 수 있다.

 

state의 초기값은 0번째 인덱스 값(즉 'WELCOME')으로 읽고 state가 변경되면 1번째 인덱스의 함수로 바꾼다.

 

이 세 줄은 const [mode, setMode] = useState('WELCOME')과 같은 형태로 한 줄로 줄여 쓸수 있다.

보통 이런 형태로 쓴다고 한다.

setMode로 바꿔준다.

 

 

 

 

이제 선택한 list에 해당되는 내용이 Article에 나타나게 할 것이다.

어떤 글을 선택했는지 state로 만들어 줘야 한다.

const [id, setId] = useState(null);과 같이 적어준다.

현재값이 선택되지 않았으니까 초기값이 없다고 지정해 주기 위해 null값을 넣어 준다.

nav 컴포넌트의 글을 클릭할 때 id값이 바뀌면 컴포넌트가 새로 실행되면서

새로운 아이디값이 지정되게 한다

우리가 선택한 id와 이전에 만들었던 topics의 id와 일치하는 원소를 찾아 그에 맞는 title과 body 값으로 세팅해 줄 것이다.

 

 

 

title과 body의 값은 null로 초기화되게 하고

반복문을 이용하여 우리가 클릭한 li값의 id와  topics의 원소 중에 id가 일치하는 원소가 있으면

그 원소에 title값과 body값을 각각 title, body 변수에 넣어지게 하였다.

 

근데 이 id값은 우리가 이전에 작성한 코드로 인해 문자열로 반환되기 때문에 (태그의 속성으로 넘기면 숫자가 문자열로 반환된다고 한다)

Number 등의 함수로 문자를 숫자로 컨버팅해 주는 작업을 거쳐야 한다.

 

클릭했더니 잘 출력되는 모습을 볼 수 있다.