[한 입 크기로 잘라 먹는 리액트]

 

 

JSX : JavaScript Extension (JS+HTML)

 

 

cf. 자바스크립트 모듈 시스템 ES 모듈  CommonJS 

     ES 모듈은 ES6에 도입된 JS 모듈 시스템.

        내보내기: named export(변수 앞에 export 붙여서), export default / 불러오기: import

     CommonJS는 NodeJS 환경을 위해 만들어진 모듈 시스템.

        내보내기: exports(exports.변수 형식으로), module.exports(module.exports = { 객체 형식(변수, 변수, ...) }으로)

         / 불러오기: require(require('./파일명') 형식으로)

 

리액트는 보통 ES 모듈 사용, export default 사용하여 하나의 기본 함수를 내보냄. 단, 모듈 당 하나만 가능 !

하지만, 보일러 플레이트가 아닌 직접 리액트를 구축할 때는 CommonJS 모듈 시스템을 사용해야 하므로 둘 다 알아두고 있을 것 !

 

 

https://www.youtube.com/watch?v=5NXEXkIrkAk 

 

 

 

 

 

위에 나온 index.js에서는 최상위 컴포넌트를 정의할 수 있다는 것을 볼 수 있다.

보통 최상위 컴포넌트를 <App />으로 지칭한다.

 

 

 

 

 

 

 

 

fragment 기능을 사용하려면, react를 불러와줘야 함 !

리액트의 기능을 이용하지 않는 컴포넌트는 react를 import하지 않아도 상관 없음.

 

 

클래스명을 지정할 때 쓰는 class는 JS의 예약어이기 때문에, React에서 사용을 못해 className으로 바꾸어 사용한다.

 

 

 

State : 계속해서 변화하는 특정 상태, 상태에 따라 각각 다른 동작을 함

state도 리액트의 기능(메서드)이므로 리액트를 임포트해야 함.

 

 

 

props: 컴포넌트에 데이터를 전달하는 방법

부모 컴포넌트인 App 컴포넌트에서 자식 컴포넌트인 Counter 컴포넌트에 이름을 붙여 어떤 값을 전달하는 방식을 prop이라 한다 !! 전달하는 데이터가 여러 개이면 props :))

 

자식 컴포넌트는 부모 컴포넌트에서 내려준 props를 매개변수로 받아서 사용할 수 있다.

 

 

 

 

props는 객체 안에 담겨서 부모로부터 자식에게로 전달되는 것을 볼 수 있다.

 

위와 같이 인라인 스타일로 작성시 길어질 때, 

아래와 같이 따로 변수에 객체로 담아 ...(스프레드 연산)을 사용하여도 동일하게 전달됨을 알 수 있다.

 

 

 

 

저렇게 부모 App에게서 받아 온 데이터 counterProps를 자식 Counter에서 props로 전달받을 수 있고, 

특정한 데이터를 객체의 프로퍼티 접근처럼 작성하여 접근할 수 있다. 

위에서 useState의 초기값으로 이런 표기식으로 넣어줘 count라는 데이터가 5로 설정되어 렌더되고 있는 것을 볼 수 있다 !

 

데이터를 받아올 때 객체로 받아오기 때문에 !

데이터를 받을 때 비구조화 할당으로 받을 수도 있다 !

 

 

 

({initialValue})는 비구조화 할당 {initailValue} = props 로 props에서 initialValue만 뽑아 쓴 것 !

 

cf. 만약 부모 counterProps라는 데이터에 initialValue의 값이 없었다면(undefined) 숫자가 나왔어야 할 자리에 아무 것도 안 나오다가, + 버튼을 누르면 undefined에 +1을 한 게 되므로, NaN이 출력될 것이다.

어떤 특정 props가 undefined로 전달될 수도 있는 때를 대비해 defaultProps를 지정할 수 있다.

 

 

 

OddEvenResult 컴포넌트가 받아올 데이터는 Counter 컴포넌트가 가지고 있는 count 데이터이므로, 프롭스로 받는 방법 밖에는 없다. Counter 컴포넌트에서 자식 컴포넌트가 된 OddEvenResult에 props로 count를 전달한다 !

그러면 OddEvenResult에서 count를 props로 전달받을 수 있게 되는 것이다.

 

 

 

부모(Counter)가 내려주는 props(count)가 변경되면 자식 컴포넌트(OddEvenResult)도 리렌더가 일어난다.

게다가 부모가 내려주는 props가 전혀 없는 그냥 자식 컴포넌트라고 하더라고,

부모의 state가 변경되면 자식 컴포넌트도 그냥 리렌더된다 !

 

 

 

props를 통해서 부모에서 자식 컴포넌트에 뭐든지 전달할 수 있는데, 심지어 컴포넌트(children)도 전달이 된다.

 

컴포넌트를 감쌀 컴포넌트(Container)를 만들어 본다.