2021.07.11 React props,state

2021.07.11 React props,state_정리노트

 

홀홀 분명 예ㅔㅔㅔ전에 똑같은글을 봤다는 기억이 난다면 모두 지우시게

예전에 제일 열심히 정리하고 제일 기본적이면서 필수적인 컴포넌트 기능이라고 생각하는 만큼, 아예 밀어버리고 다시 적을거임 . 모르거나 헷갈리면 또 혼자 토닥토닥하면서 또 적고 또 적기.

 

오늘도 마찬가지로

 

http://www.yes24.com/Product/Goods/62597469

리액트를 다루는 기술 - YES24

 

책을 보고 공부한 것 위주로 개념정리!

 

컴포넌트에서 뺄 수 없는 props 와 state를 정리해봅씨다!

 

 

 

 

props

properties를 줄인 말로 말 그대로 컴포넌트의 속성을 설정할 때 사용하는 요소 .

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트 ( 내가 지금 따라하는 파일에서는 최종적으로 App 에다가 모두 모으니까 App 이 부모 컴포넌트 ) 에서 설정할 수 있음.

 

 

 

 

내가  지금 코드를 작성할 곳은 src/MyComponent.js   arrow fuction 을 통해서 적어주었다.

 

arrow fuction 을 쓰는 이유는 ES6에서부터 새로 등장한 함수 표현식인데, 한눈에 보기에 훨씬 편하쥬 ? 

하지만 기존 fuction 과는 다른점들이 존재하는데, 그런 의미에서 arrow fuction 을 한번 짚고 넘어가겠음다.

 

---

 

arrow fuction

화살표 함수. 기존 함수에서는 function 이라는 키워드와 함께 항상 블럭과 함께 써줬어야 했는데 ({} 중괄호 ) arrow fuction 은 이 모두를 생략해도 되는 anonymous function ( 익명함수) 이다. 

 

 

const simplePrint = function(){
	console.log('say Hi!');
};


// arrow function 변환

// function keyword 생략.
// 실행문이 한 줄일 경우 {} 도 생략. 이 결과에서는 또한 return하는 값도 해당 함수가 실행 결과가 된다.

const simplePrint = ()=> console.log('say Hi!');

 

 

또한 매개변수가 하나일때에는 소괄호 조차 생략할 수 있음.

const sum = x=> x+1;

sum(1) // 2

 

엄청 간단해졌쥬 ? 하지만 오로지 익명함수로만 사용되기 때문에 못쓰는 곳도 있고, 호출하기 위해서는 반드시 표현식으로 나타내야함.

>> 함수 이름이 없기 때문에 변수에다가 할당해주라는 말.

 

// Uncaught SyntaxError: Function statements require a function name

function ()=> console.log('say Hi!');

에러가 뜨기 때문에 익명으로 fuction 키워드없이 변수에다가 할당해주자!

 

화살표 함수를 쓸 수 없는 경우는

 

객체의 메소드를 정의하는 경우

prototype에 메소드를 할당하는 경우

생성자 함수로 사용하는 경우

 

등등 prototype 프로퍼티를 갖지 않기 때문에 이럴 때에는 기존 function 을 쓴다고 한다.

 

오늘은 많고 많은 특징중에서 가장 큰 차이점인 this 에서의 예 하나만 살펴보고 갑시다!

 

 

나진짜..this 는 너무 헷갈렸는데, 막 아무리 쉽게 설명해주셔도 눈에 잘안보였다. 근데 다행히 너무 잘설명해주신 유튭을 찾았음...!

출처 - 드림코딩 엘리 유튜브

 

갓엘리..흑흑 ㅠㅠㅠ 진심 감사합니다... 

 

https://www.youtube.com/watch?v=e_lU39U-5bQ 

 

해당 링크를 통해서 보면 함수의 전체적인 특징과 함께 화살표 함수의 특징들이 적혀있는데, 기존 함수는 스코프는 내가 가져온 짤로 정리할 수 있다..! 꼭 유튭 보세요..두번 보세요 굿굿

 

하지만 화살표함수에서는 this 를 바인딩하지 않기 때문에 , 일반 function 과는 가리키는 this 값이 다르다.

 

 

이렇게 일반함수에서는 해당 값을 호출하게 되면, 

 

 

 

 

 

해당 값이 바인딩 되어 웰시코기가 나오지만,

 

 

 

 

 

이렇게 화살표 함수에서는 가리키는 this가 상위스코프가 된다. 

 

 

막 여기서 arrow function 이 바인딩하는 this 의 결정방식은 렉시컬 스코프와 유사해서 어쩌구리... 라고 구글님덜이 말해주시지만,

다행히 함수형 컴포넌트를 작성할 때에는, function 키워드와 화살표 함수 문법을 사용하는 간의 큰 차이는 없어서 좀 더 간결한 화살표 함수로 작성하면 편하다고 한다! 와 ! 다행 !

---

 

 

후..... 자 이제 진짜 본론인 props 부터 다시보자.

 

 

 

 

src/App.js

 

 

아까 MyComponent 를 App에서 불러와서 써주었는데, props 를 사용하기 위해서는 MyComponent에서 나 props 를 쓸거야!!!! 넘겨 주는 값이 있을테야!!!!! 라고 설정해주고, App 에서는 해당 props값에 해당하는 속성값을 적어주면 된다. 역시 치면서 눈으로 한번 더 보면서 생각하면 쉬울테지~~~~

 

 

src/MyComponent 

 

 

위에서 말한 것 처럼 매개변수가 props 하나이기 때문에, 소괄호도 생략해서 매개변수로 넣어주고, 렌더링할 값은 저번에 적었던 대로 JSX 내부에서 {} 로 감싸주자!

 

 

src/App

 

 

해당 부모컴포넌트에서는 이렇게 설정해주면 된다!

실행화면

 

 

그러면 이렇게 된다!  짝ㅉ작 개념처럼 자식 컴포넌트에서는 나 props 로 속성 정해줄 거 있다!!!!! 하고 함수의 파라미터로 해당 props 를 넣고 설정하면, 부모 컴포넌트에서는 해당 props 를 가져와서 값을 설정할 수 있다.

 

---

7월 29일 추가

++ 나중에 헷갈려서 공식문서 보고 다시 정리함. 

개념과 흐름은 얼추 맞는 말이지만, 역시 한국말 아다르고 어다르다고 조금 넘겨주고 받는 느낌이 반대의 느낌이라 나중에 복잡하게 서로 주고받고 하니까 헷갈려서 다시 덧붙여서 설명쓰

 

출처 - 리액트 공식문서

 

여기서 보면, 부모 컴포넌트에서 props 의 설정값을 적어주고,

해당 설정값을 자식 컴포넌트에서 가져와서 자식 컴포넌트에서 props 자리에여~ 짜란 하고 만들어 놓은 곳에, 그 값들을 넣어주는 것! 

해당 챕터에서는 간단하게 예시를 들어서 흐름을 저렇게 가져간 거 ..같은데 나중에 함수를 호출하고 받는 예제를 하다 헷갈려서 공식문서에서 자세한 렌더링 과정을 가져왔다! 다들 참고하시길!!

---

 

 

 

 

자 그러면 props 의 기능들 여러개 정리정리 

 

 

defaultProps

부모 컴포넌트에서 아직 props 의 값을 정해주지 않았을때 띄울 값.

 

다시 App 으로 돌아가서 

 

 

props 의 값을 넘겨 주지 않았을 때,

 

src/MyComponent

 

 

이렇게 defaultProps 를 설정해주면, 말 그대로 기본 props 의 값이 기본 이름이 된다.

실행화면

 

 

 

이렇게!

 

 

 

children

컴포넌트 태그 사이의 내용을 보여주고 싶을 때 사용하는 props

 

 

 

만약 App 에서 태그 사이의 해당 값이 보여지고 싶다면, 마찬가지로 자식 컴포넌트에서 나 태그 사이에 있는 props 도 보여줄거야!!! 라고 하면 되겠지?? 

 

 

 

 

src/MyComponent

 

그 때 쓰는 것이 바로 children!! 

 

 

얘도 마찬가지로 props.children 으로 해주면 된다.

 

 

실행화면 

 

 

 

 

비구조화 할당으로 더 간단하게 나타내기

 

비구조화 할당이 무어냐고 물어보신다면.. 링크를 드리는 것이 인지상정 *^^*

https://learnjs.vlpt.us/useful/06-destructuring.html

06. 비구조화 할당 (구조 분해) 문법 · GitBook

지금은 ... 당장에 나도 개념만 이해했지 솔직하게 내가 내 나름의 방식대로 이보다 더 잘 설명할 수 없을 것 같다. ㅎㅅㅎ.. 다음에 나도..자스 고수가 된다면..꼭.. ( 아련 )

 

src/MyComponent

 

 

이렇게 비구조화 할당으로 바로 props 를 선언해주면, props.name 이렇게 적지 않아도 된다! 훨씬 가독성 있어진듯!

 

 

더 나아가서 함수 파라미터 부분에도 마찬가지로 비구조화 할당이 가능하기 때문에,

 

 

최종으로는 이렇게 함수 안에 바로 넣어서 사용이 가능하다!

 

 

propTypes

컴포넌트의 필수 props 나 props 의 타입을 지정할 때 사용

 

 

src/MyComponent

 

 

propTypes 는 불러와서 사용해야하기 때문에, 이렇게 불러와서 defaultProps 와 같이 객체 형태로 적어준다.

 

 

만약에 내가 부모 컴포넌트에서 props 의 값을,

 

src/App

 

 

 

숫자로 주게 되면,

 

값은 뜨지만, 니가 name 의 값은 문자로 지정했는데 왜 숫자로 지정해!!!!! 하면서 콘솔에는 경고가 뜨게 된다.

 

 

 

isRequired

이 propTypes 는 꼭 지정해주세요. 부모 컴포넌트에서 지정해주지 않았다면, 경고를 띄워주세요. 이 props 는 이 타입으로 하겠습니다. 라고 할 때 사용.

 

src/MyComponent

 

 

이렇게 자식 컴포넌트에서 favoriteNumber 를 지정해서 , 우리는 이 props 의 값은 필수로 정해줄게요. 타입은 숫자로요!

 

 

 

그러고 당연히 우리는 App 에서 favoriteNumber 를 설정하지 않았으니, 얘는 필수인데 왜 undefined 지 하고 오류를 띄워주게 된다.

 

 

그래서 마지막으로 favoriteNumber까지 잘 설정해주면,

 

 

실행화면

 

 

크으으으 모두 완성!

 

항상 문자와 숫자만은 아닐테니

 

https://ko.reactjs.org/docs/typechecking-with-proptypes.html

PropTypes와 함께 하는 타입 확인 – React

다른 타입은 공식문서를 가져왔다! 여기서 내가 쓰고 싶은 propsTypes 를 보고 쓰면 된다!

 

 

---

 

후... 자 이제 얼마 안남았숴이 state 로 간다!

 

 

리액트의 16.8 버전 전에는 class 형 컴포넌트에서 밖에 state를 사용할 수 없었는데, 이제는 Hooks 라는 것이 생기고 useState 라는 좋은 것들이 많이 나와서 함수형 컴포넌트에서도 state 를 사용할 수 있게 되었다! ㅎㅁㅎ 체고 그러니 나는 어려운 클래스형 컴포넌트의 state 는 다루지 않겠어...! 함수형으로 바로 설명하고 중간에 큰 차이점 같은거는 설명하겠삼.

 

 

state

props 는 부모 컴포넌트에서 속성 값을 정의했다면, state 는 컴포넌트 내부에서의 변화를 뜻함. 그러니까 한 컴포넌트 안에서만 이리저리 변화하는 값들을 말하는 것이지만, 역시 말은 어렵다 ! 직접 쳐봅씨다

 

 

src/Say (새로 생성.)

 

 

함수형에서 state 를 쓰기 위해서는 useState를 불러오고, [현재 상태, 상태를 바꾸어 주는 함수 ( 세터함수 ) ] 의 배열을 비구조화 할당을 통해 바로 나타낼 수 있다. useState() 괄호 안, 즉 함수의 인자에는 초깃값을 넣어주면 된다. 

 

여기서 주석으로 적어놓은 setState 는 클래스형 컴포넌트에서 state 를 변화를 줄 때 쓰던 함수인데, 얘는 객체로 형태가 정해져 있는 반면에 useState 는 배열, 문자 등 형태를 자유로이 쓸 수 있다. 

 

배열의 이름 또한 내가 여기서 임의로 적어준 것이고, text,setText 이런식으로 자유롭게 쓰기도 가능!

 

 

 

 

그래서 현재 상태는 이거! 버튼을 눌렀을 때 onclick 이벤트로 함수를 작동시킬 건데, 세터함수에다가 변하는 텍스트를 인자로 담아주면 된다!!

 

 

src/App

 

 

이렇게 부모 컴포넌트에서 Say 를 불러오자. 

 

 

 

참고로 계속 경로 적다가 깨달은건데, src/App ,src/Say 로 둘은 같은 경로에 있으니 , ./ 로 만약 상위 경로에 있다면 ../ 로 경로 설정 하면 된다.. 처음에 이것도 헷갈려서 고생 쫌 했음 ㅎ

 

쨋든 그래서 렌더링 되면,

 

 

 

 

 

초기 값을 "" 빈 값으로 설정해주었으니, 이렇게 버튼만 뜨고, 각각 입장 퇴장 버튼을 누르면 ,

 

 

입장 버튼 실행화면

 

 

 

퇴장 버튼 실행화면

 

 

 

크으으 역시 이렇게 세터함수 인자의 값이 잘들어간 것을 볼 수 있다.

 

 

 

useState 는 한 컴포넌트 내에서 여러번 사용할 수 있다.

 

 

 

src/Say

 

 

이렇게 color,setColor 라는 state 를 선언해준다음, 해당 버튼을 누르면,

 

 

초록색 버튼  실행화면

 

 

 

얘도 마찬가지로 잘 적용이 되는 모습을 볼 수 있다!

 

 

props 는 자식 컴포넌트에서 props 를 넘겨서 부모 컴포넌트에서 속성 값을 입력하고, state 는 내부에서 변화하는 값을 세터함수의 인자로써 바꿀 수 있다 음음. 이렇게 정리할 수 있겠군!

 

 

---

 

 

 

오ㅑ...props 적고 자고 일어나서 이제 state 만 정리하고 해야지~~~~ 했는데 props 부터 다 날라가 있어서 결국 몇 시간동안 다시 작성함....^^ ㅎ 그래서 책만 3장을 3번이나 읽었다! 와! 33! ㅎ...

앞으로 유동적으로 props 를 다루는 법, 배열 or 객체에서의 state 사용 등등 아직 갈 길이 멀다.

하지만 계속 보다 보니 이제 진심진심 포스팅도 두번 쓰다보니 props 와 state 쯤..? 은 구분은 할 수 있을 것 같다 ㅎ...

맨 처음에 마냥 보았을 때는 컴포넌트 간의 이동이 너무 잦다보니 혼자 너무 헷갈렸던 것 같지만, 지금은 어느정도 정리가 다시 된 것 같아 뿌듯하다!!!!! 

 

 

지금은 새벽 3시 55분... 4시 되기전 포스팅을 마치고 싶었으니 바로 인사하고 자러가야지! 그럼 다들 즐 새벽코딩!!!!!!!! 오늘의 포스팅 끝!!!!!