10. React / 리액트 (props 와 state)

Component 를 시작하기전에 

다음 그림부터 보자

parent 는 지금까지 작성한 App.js 일것이고 추가로 이제 component 를 만들어 볼것인데 그전에 

props와 state에 대해 간략하게 알고가자

말그대로 속성과 상태이다

쉽게 설명하면 

parent 는  백지도화지라고 가정하면 

각각 component 를 덕지덕지 붙여서 하나의 화면을 만든다 ~ 라고 생각하면 될듯

밑에 그림을보면

portfolio 부모 컴포넌트라고 생각하고 

Navbar 컴포넌트 

jumbotron 컴포넌트

contents 컴포넌트

footer 컴포넌트

이렇게 각각 컴포넌트 별로 만들어서 붙이면됨

그리고 앞서 공부한 css로 이쁘게 꾸며주면

이런식으로 그림이 나오는것이다.

위 Navbar에서 Home / About / Gallery / Contact 를  porps라고 생각하자   

우측에 로그인은 state 라고 생각하자

로그인을하면 logout으로 상태를 바꾼다

이런식으로 정적인것을 props  동적인것을 state 라고 생각하면 쉽지만 

무조건 props가 정적이다는 아니다. ... 

(부모 state에서 자식 porps로  자식 컴포넌트에서 특정 이벤트가 발생할 때 부모 메서드를 호출하면 

props 도 유동적으로 사용할 수 있다 하지만 우선 개념을 이해하기 위해선 쉽게 가자)