스파르타 코딩클럽 - 리액트 1주차(8)

1. 컴포넌트(Component)란?

Component란?

Component는 클래스형과 함수형이 있다. 리액트에서의 컴포넌트는 가장 중요한 요소이다. 리액트로 만들어진 앱을 이루는 최소한의 단위가 컴포넌트이기 때문이다. 정리하자면, 작으면서 단단한 컴포넌트와 만들어진 컴포넌트들이 유기적으로 연결되며 동작을 할때, 좋은 앱이 만들어진다. 결론은 컴포넌트는 블록이라 생각하면 된다.

2. State와 Props

State

state는 Component가 가지고 있는 데이터이다.

ex. 스파르타코딩클럽 사이트 조각 중 헤더 컴포넌트를 예로 들어보자면!

• 이 헤더에 들어갈 데이터는 뭐가있을까?
  -> 로고 이미지 경로, 메뉴 이름(온라인, 오프라인, 기업교육, 내 강의실)이 있다.
• 이 데이터는 container이나 footer 컴포넌트에서 쓰지 않는다.
• 즉, 헤더 컴포넌트에서만 쓰는 정보인 셈이다.
• state는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터이다.
• 생성도 수정도 오직 해당 컴포넌트 내에서만 이뤄진다. 내꺼니까 생성도 수정도 자유롭다.

Props

props는 Component가 부모 Component로부터 받아온 데이터이다.

이번엔 컨테이너 컴포넌트를 예로 들어자면!

컨테이너 컴포넌트는 두 개의 자식 컴포넌트를 가지고 있다.

• 컨테이너 컴포넌트만 이미지배너 컴포넌트한테 필요한 이미지 경로를 가지고 있다고 가장한다(state로 가지고 있다고 가정).
• 이 때 이미지배너 컴포넌트는 자신의 부모인 컨테이너 컴포넌트로부터 이미지 경로를 전달받아서 사용해한다.
• 컨테이너가 가지고 있는 이미지 경로를 이미지배너에게 전달해주면, 이 이미지 경로가 이미지 배너 컴포넌트의 props가 된다.
• 다시 말해, 부모 컴포넌트로부터 전달 받은 데이터를 props라고 한다.
• 그럼 부모 컴포넌트가 가지고 있는 데이터를 이미지배너 컴포넌트가 추가 하거나 수정할 수있을까?
• 결론 props로 받은 데이터는 수정할 수 없다. 왜? 남의 것이니까!