프론트엔드 개발자가 되기위한 여정 -10

이정우·2022년 9월 13일
0

frontend-bootcamp

목록 보기
12/60

밸하! ~~

밸로그 여러분 안녕하세요!

오늘의 포스팅 주제는 바로!!!

뜨거운감자인 React의 state와 props입니다~~
와~

그럼 본격적으로 두개는 어떤의미이고 어떠한 차이를 가지고 있는지 알아볼까요???

먼저
state와 props가 무엇인지 알아보겠습니다~!

1. state란?

state와 props는 도대체 무엇일까요??

바로 React에서 사용하는 데이터를 다루는 도구들 입니다!!

먼저 state는
컴포넌트의 내부에서 선언을 하며 컴포넌트 내부에서 그 값을 다룰수 있습니다!

무슨소리냐

react에서는 모든 부분들이 컴포넌트로 나누어집니다
이 컴포넌트 안에서 state라는 것을 사용하여 데이터를 다룰수 있는데요 !

하지만 state의 경우에는 말 그대로 컴포넌트 '내부'에서만 사용을 하기 때문에
container/presenter패턴의 경우에는 데이터를 전달해주지 못하여 어려움이 있는데요!
이럴때 사용되는것이 바로 props입니다!
그럼 props에 대해서 알아볼까요??

2. props란?

props는 state와는 다르게 컴포넌트 내부에서만 쓰이는것이 아닌 다른 컴포넌트에서도 사용이 가능한 데이터를 다루는 도구라고도 할수있습니다
무슨말이냐
props라는것은 객체인데 이곳에 데이터를 담아서 다른 컨테이너에 전송을 할 수 있는 역할을 가지고 있다고도 표현을 할 수 있겠습니다!!


이 props라는것을 사용한다면
container/presenter패턴에서 container에 선언한 데이터들을 presenter로 보내어 데이터를 옮길수도 있다는거죠!! 놀랍죠?!

그럼 이런 생각이 들수도 있겠네요
"아니! 그럼 state말고 props만 쓰면 되는거 아니야?!"
정답은 아닙니다!

state를 통해서 변수를 선언 할 수있고 이를 통하여 변수에 상응하는 다양한 값들을 조작할수도 있기에 어떤게 더 낫다 나쁘다 할 수 없다는겨죠
왜요??
사용하는곳이 서로 다르니까요!
데이터를 다른 컴포넌트로 옮기고 싶다면 props를
내부에서 조작을 하고 싶다면 state를 사용해서 조작을 하면 되겠구나! 라고 생각하고 넘어가주시면 좋을것같습니다~~

오늘의 포스팅은 여.기.까.지

오늘은 조금 짧죠??
앞으로도 다양한 내용들이 더 올라올 예정이니! 잊지말고 찾아주세요~~

그럼이만~~
~~

profile
주니어 프론트엔드 개발자

0개의 댓글