리액트 #4 state

리액트 #4 state | Ecency

안녕하세요. @u robotics 입니다.
이번 4번째 시간에는
props와 함께 자주 나오는 state를
잠깐 해보겠습니다.

state는 영어사전 찾아보면
상태라고 나옵니다.

전기로 형광등을 켤 때를
한 번 생각해보세요.

스위치 켰을 때랑 껐을 때,
똑같이 불이 켜져있을 필요가 없잖아요.
상태(state)에 따라서
불 켜고, 불 끄고, 조절해주면 됩니다.

그런 역할이 state 입니다.

앞서 했었던 props 도 변수고,
지금 하는 state도 변수입니다.

근데 왜 2개로 나눠놨을까?

리액트에서 만든 규칙입니다.
리액트는 props를 부모 컴포넌트 (상위) 만
설정/변경이 가능합니다.
그래서 자식 컴포넌트는 읽기 전용으로만 쓸 수 있죠.

그러면 자식은 엄마 시킨대로만 할 수 있고,
뭔가 할 수 있는 게 없네요.

그래서 state를 만든 거구요.
컴포넌트 내부에서 읽고 업데이트를 할 수 있습니다.
상태 변화라는 특성을 표현하는 역할입니다.
자식도 자기 맘대로 뭔가 바꿀 수 있는 거죠 ㅎㅎㅎㅎ

자, 한 번 시작해봅시다.
처음은 늘 그렇듯이
create-react-app를 써봅시다.

커맨드 창을 열어서
npx create-react-app [앱이름]
이렇게 입력해주세요.

예를 들면) npx create-react-app state
이렇게 입력하시면 됩니다.

state 라는 웹을 만드는 거죠.

그러면 뭐라고 막 설치를 합니다.
설치가 끝나면 cd state 라고 입력을 하시고
npm start 라고 입력해주세요.

그러면 또 익숙한 화면이 뜹니다.

그러면 아톰에서 (다른 편집기를 쓰셔도 됩니다.)
state 폴더를 열어줍니다.

state 폴더 밑에
state > src > App.js 를 열어줍니다.

코드를 이렇게 작성해주시고요.

다음에는 MyCom.js 파일을
똑같이 src 폴더 안에 만들어주세요.

MyCom.js 는
이렇게 입력을 해주겠습니다.

4줄 5줄의 props 는
처음에 엄마한테 props 받아서
나도 똑같이 사용할거에요.
라고 말해주는 겁니다.

그 다음에 state에서 중요한 건
6, 7, 8줄인데요.
state를 선언( 사용한다고 예약함)
number라는 state를 사용하는 데
처음 값은 0이다. 라고 설정해주는 겁니다.

다음은 render 함수 입니다.
이름만 어렵지 이거 그냥
화면에 보여주는 겁니다. ㅎㅎㅎ

여기 쓰는 건 화면에 나온다고 생각하시면 됩니다.
react로 개발하면 웹 화면에 나오는 거고,
react-native로 개발하면 앱 화면에 나오는 겁니다.

react에서는
이 render 함수가 꼭 있어야 합니다.
그리고 return 도 꼭 있어야 합니다.
리액트의 규칙입니다.
안 그러면 에러가 납니다.

12줄과 22줄에서
div로 묶은 부분이
JSX를 사용했습니다.
html이랑 문법 비슷해서
조금만 보시면 될 것 같습니다.

13, 14 줄에서는 props를 사용했어요.
그리고 15줄에서는 state를 사용했습니다.

16줄부터 보시면
버튼을 클릭했을 때,
this.setState 함수를 써서
number를 1 증가 시키고 있습니다.

버튼 클릭하면
number 가 1이 올라가는 거죠.

요 코드를 그대로 치셔서
저장하시고,
cd state
npm start를 쳐보시면
결과는 이런 화면이 나옵니다.

그리고 더하기라고 써있는,
버튼을 계속 눌러보시면.

이렇게 버튼 누를 때마다
숫자가 올라가는 걸 볼 수 있습니다.

읽어주셔서 감사합니다. ^^
보팅, 디클릭 해주시면 큰 힘이 됩니다.
댓글로 써주시면 저도 맞 보클하겠습니다.

감사합니다.

감사합니다. ^^

^{오늘은 JAMA pediatrics에 게재된 'Vitamin D and Your Child'를...}