isolation 과 encapsulation 을 하여 JSX를 분리된 컴포넌트로 만들었다.
divide & conquer를 할 수 있게 해줬다.
무엇이 컴포넌트가 되어야 하는지
footer가 컴포넌트가 되어야 하는지.
header 가 컴포넌트가 되어야 하는지. notification bar 가 컴포넌트가 되어야 하는지.
이 logic 들을 각각의 조각으로 나눌 것이다.
Props 는 일종의 데이터를 전송할 수 있는 방식이다.
부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보낼 수 있게 해주는 방법이다.
이게 진짜 왜 필요한지를 알기 위해서는 이게 어떤 문제들을 해결할 수 있는지를 경험해 보아야 한다.
각각 버튼마다 컴포넌트를 만든다고 생각해 보자.
컴포넌트라는 것은 단순히 어떤 JSX를 return 하는 함수일 뿐이다.
함수형 컴포넌트라고 한다.
<함수명 /> 이렇게 사용하는 것은 JSX 안에서 함수를 부르는 방법이다.
ReactJS에서는 style을 바꾸고 싶다면, 많은 방법들이 있다. CSS 여러 라이브러리 등등이 있지만 가장 기본적으로 할 수 있는 건 button tag 내의 style을 바꾸는 것이다. 평범한 자바스크립트의 object 형식으로 쓰면 된다.
이 설정들을 넘겨 줄 수 있는 button 컴포넌트가 있다면 어떨까? 왜냐하면 이 두개의 버튼 컴포넌트에서 다른 것이라고는 Text 뿐이잖아. 이런 style들을 모두 가지는 컴포넌트가 있다면 어떨까?
JavaScript에서 태그들을 어떻게 설정해 주었을까
input, img, button 모두 아래와 같은 syntax로 설정 해주었었다.
<img src="" />
<input type ="text"/>
<button onClick={}
(onClick ={} : 이렇게 하는 것은 JSX에서 이벤트리스너를 붙혔던 것이다.)
이 syntax를 우리의 커스텀 컴포넌트에서도 그대로 사용할 수 있다. 이게 우리가 동일한 Btn 컴포넌트를 재사용할 수 있는 방법이다. syntax를 통해 각종태그들에 정보를 전달했던 것처럼 새로운 정보들을 Btn 컴포넌트에게 전달할 것이다.
text 라는 이름으로 적어줘도 되고 아래처럼 banana 라고 적어줘도 된다. 하지만!
전혀 반영이 되지 않았다. 왜 그럴까? 그것은 banana 라고 전해준 data 를 컴포넌트에서 전혀 활용을 하고 있지 않기 때문이다.
생성해주는 모든 컴포넌트들은 다 컴포넌트의 소괄호로 인자를 받아준다.
첫번째 인자에 어떠한 이름도 괜찮지만 사람들은 보통 props 라고 부른다.(컴포넌트에 전달된 properties 라서 )
그래서 함수의 인자로 값을 넣어주는 것이기에
두번의 랜더링을 하였기에 두개의 결과로 콘솔창에 출력된다. 그리고 정보를 함수에 보내고 있다.
ReactJS 는 내가 넣은 모든 Props(propertys)
(생각이 나는 건 vanilla JS 에서 Object 안에 들어가는 것들이 Property 였지.)
컴포넌트에 넣어준 props는 모두 다 컴포넌트 함수의 첫번째 인자에 담긴다. 두번째 인자와 같은 건 없다.
props는 우리가 보낸 모든 걸 가지고 있는 object 이다.
이제 이 banana라고 보낸 걸 사용할 건데
우리가 object를 받고 있다는 걸 알고 있기 때문에 가능하다.
우리는 오브젝트가 banana라는 key를 가지고 있음을 알고 있다.
그럼 우리가 같은 Btn 컴포넌트를 사용하지만 App() 컴포넌트에 안에서, App() 컴포넌트에 의해 설정되고 있다.
단 하나의 Btn 컴포넌트가 있지만 보다시피 UI 가 다르다.
그야말로 재사용 가능하게 만들고 있는 것이다.
하지만 props를 자주 보지는 않을 것이다. 대신에 사람들은 shortcut을 사용하기 때문이다.
property를 object로 부터 꺼내는 것이다. {} 중괄호를 사용해서,(오브젝트 안에서 요소들을 꺼내는 쉬운 ES6의 방법이다)
컴포넌트는 banana라는 이름의 props 를 기다리고 있다.
big 이라는 property를 추가해 줄수도 있는데 이렇게 되면 두번째 버튼에서는 undefined 라고 뜨게 될 것이다.
style 안에서 props 를 대상으로 if else를 할 수 있다. 삼항 연산자를 이용해서 말이다.
