Props 리액트에서 컴포넌트에 데이터를 전달해주는 방법
간단하게 Props가 어떤 기능인지 얘기해보면
현재까지 벨로그 글에 포스팅한 리액트를보면 컴포넌트가
App.js와 Count.js가 있는데
App.js에서 만들어 둔 State를 사용하기위해 Count.js로 State를 전달해주는 방법이다.
코드작성을 해보면서 이해를해보자.
App.js에서 Count.js로 Props 전송하기
이런식으로 Counter 태그안에 a={값} b={값} c={값} 이런식으로 전송을 해주면된다.
Count.js에서 데이터 받기
Counter에서 props를 매개변수,파라미터 로 받아서 사용을 해야한다.
콘솔창에 props를 띄워보면 객체로 받아온걸 확인해볼 수 있는데
사용하려면 props.데이터이름 이런식으로 객체를 사용하듯이 사용하면 된다.
받아온 데이터를 count State에 넣어서 사용을 해보면
받아온 데이터를 사용해서 기본값이 0이 아니라 5로 출력이 되어있는걸 볼 수 있다.
근데 지금 여러개의 데이터를 전송해서 App.js에 Count 태그가 길어져서 보기가 불편하다고 느끼면
객체로 데이터들을 만들어서 전송해도된다.
데이터들을 객체로 만든뒤 스프레드연산자를 이용해서 중괄호안에 풀어주면 완성.
그런데 만약 App.js에서 initialValue를 받아서 화면에 출력하고있는데
initialValue가 지워져버린다면 화면에 출력이 아무것도 되지않을것이다.
위의 사진처럼 되어버릴것이다. 아무런 숫자가 출력되지않는 버그가일어날텐데
지금 저 상태는 initialValue가 없기때문에 initialValue를 undefined로 인식이된다.
콘솔창의 결과.
그래서 화면의 버튼을 누르게되면 
이런 버그가 발생한다 undefined에 증가 감소 이벤트를 적용해서 NaN이 출력되는걸 볼 수 있는데
이런 버그를 방지하기위해
Counter.js 코드 맨 아래에 저런 코드를 추가해주면 된다
저렇게 기본Props값을 미리 지정을해둔다면
App.js에서 데이터를 까먹고 보내주지못했어도 버그를 방지해줄 수 있다.
그리고 Props는 이런 정적인 데이터말고도 동적인 데이터를 보내줄 수도 있다.
동적인 데이터라함은 State를 뜻하는데 여기서 이제 count가 홀수인지 짝수인지 알려주는 새로운 기능을 만들어보겠다.
새로운 OddEvenResult.js 라는 컴포넌트를 생성해서 만든다.
이런식으로 제작을 해두었다.
Count.js에서 OddEvenResult.js로 count State를 보내준 뒤
OddEvenResult.js에서 count를 props로 받아 count가 짝수라면 짝수를 홀수라면 홀수를 띄우게끔 삼항연산자로 제작을 하였다.
여기서 알수있는 랜더링에 관한게 있는데
Counter에서 이벤트가 발생하여 재렌더링이 생길때 OddEvenResult에서도 재렌더링이 같이 일어나는걸 볼 수 있다.
예시로 OddEvenResult에서 count Props를 받지않고 혼자 랜더링하는 자식요소일뿐일때도 재렌더링하는걸 볼 수 있다.
이렇게 누를때 마다 렌더가 출력되는걸 볼 수 있다.
리액트의 컴포넌트는
- 본인이 관리하고 가지고있는 state가 바뀔때마다 재렌더링한다.
- 본인에게 전달되어 오는 props가 바뀔때마다 재렌더링되고.
- 둘다 아니어도 부모컴포넌트가 재렌더링이되면 재렌더링이된다.
라고 생각하면 된다.
그리고 Props로는 뭐든 다 전달이 가능하기때문에 컴포넌트 자체도 전달이 가능하다.
이제 여태 만든 카운터 기능이 스타일이 들어가있지않아 밋밋함을 없애주기위해
부모 컴포넌트를 만들어서 여태 만든 컴포넌트들을 감싸주면된다.
스타일은 부모컴포넌트에 적용할 예정
부모컴포넌트 생성(Container.js)
Container에선 props로 전달받은 children은 App.js에서 Container태그로 감싸고있는 모든 컴포넌트 요소들이다.
확인해보고싶다면 콘솔창에 children을 띄워보면 된다
이렇게 확인해볼 수 있다. react.element를 받았다 라는걸 확인 가능하고
props 열어보면 또 확인이 가능했다.
