프로그래밍 공부 노트

  공식문서에서 위 사진과 같이 사용하라고 나와있었다. 하지만 아래와 같이 오류가 발생햇다. Type '{ children: string; css: { color: string; }; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.   Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322) 찾아보니 상단에 작성되어있는 jsx pragma가 CRA와 충돌이 생겨서 발생하는 문제라고 한다. /** @jsx jsx */ 위 선언을 아래와 같이 변경하면 해당 문제를 해결할 수 있었다. /** @jsxImportSource @emotion/react */ 그런데 @emotion/react를 사용하는 모든 컴포넌트에서 /** @jsxImportSource @emotion/react */ 를 작성해야 한다는 번거로움이 있었다. 번거로움과 실수를 줄이기 위해서 tsconfig.json을 수정해서 jsx pragma를 사용하지 않고도 모든 컴포넌트에서 @emotion/react를 사용할 수 있게 설정을 변경하였다. 그런데 여기서 또 다른 문제가 발생한다. 위 사진과 같이 tsconfig.json을 수정할 경우 컴포넌트 자체에서 오류는 발생하지 않았지만 작성한 css가 적용되지 않는 문제가 발생했다. hotpink 색을 적용했지만 검정색으로 표시되었다. 해당 문제는 CRA의 바벨 설정을 수정하고 해결할 수 있었다. eject를 사용하여 수정하는 방법도 있지만 eject 할 경우 이전 상태로 되돌아 갈 수 없기에 eject 없이 CRA를 커스터마이징 할 수 있게 도와주는 craco 라이브러리를 이용했다. 아래

어느 페이지에서 현재페이지로 왔느냐에따라 다르게 처리하고 싶은 경우가 있다. 이때 react-router-dom의 history.push()로 간단하게 처리할 수 있다. 일반적으로 react-router-dom으로 라우팅할 경우 아래와 같이 많이 작성한다. history . push ( ' /payment Page ' ) 하지만 간단하게 아래와 같이 작성하면 어느페이지에서 현재페이지로 왔는지 props를 넘겨주어 현재 페이지에서확인할 수 있다. history . push ( { pathname : " / payment Page " , state : { _id : " 0001 " , name : " detailPage " }} )  경로를 받아올 때는 history.location을 사용해서 pathname 값과 state값을 현재 페이지에서 받을 수 있다. 위 코드에대한 결과는 아니고 프로젝트에서 사용했을때 console.log()로 history.location을 확인해보면 아래와 같이 해당 페이지에서 경로와 값들을 받을 수 있는것을 확인할 수 있다. 나의 경우 프로젝트에서 결제페이지로 넘어오는 경로가 장바구니 목록에서 온것인지 아니면 상품을 바로 선택해서 결제페이지로 넘어온것인지에 따라 다르게 처리하는데 사용했다. 참고: https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-link-redirect-in-react-router-v4

App.js import Wrapper from " ./Wrapper " ; import Hello from " ./Hello " ; function App () { return ( < Wrapper > < Hello ></ Hello > < Hello ></ Hello > </ Wrapper > ) ; } export default App ; Wrapper.js import React from " react " ; const Wrapper = ( { children } ) => { const style = { border : " 1px solid black " , padding : " 16px " , margin : " 5px " , } ; return < div style ={ style }> { children } </ div > ; } ; export default Wrapper ; Hello.js import React from " react " ; const Hello = () => { return < div > test </ div > ; } ; export default Hello ; 최상위 태그가 아닌 컴포넌트 사이에 컴포넌트를 작성하면 상위 컴포넌트에 감싸져있는 하위 컴포넌트들은 출력되지 않는다. 컴포넌트 사이에 작성된 컴포넌트를 출력하기 위해서는 props.children을 사용해야 한다. 감싸고 있는 상위 컴포넌트 즉, 부모 컴포넌트는 props.children 으로 컴포넌트 중간에 작성한 컴포넌트들을 받아 올 수 있다. 위 예시에서  Wrapper 컴포넌트가

prop-types (원하는곳에 해당 props가 정확히 입력되었는지 확인) prop-types는 내가 작성한 컴포넌트에 props를 전달하였는데 전달한 props가 내가 원하는 정보를 정확히 전달받고 있는지 확인해준다. terminal에 npm i prop-types 를 입력해여 설치한다.  설치가 완료되었는지 확인하는 방법은  package.json 파일안에 prop-types 가 입력되어있는지 확인한다. prop-types를 사용하기위해서는 컴포넌트를 불러오듯이  를 작성해준다. 그리고 정확한 props가 전달되었는지 확인하고자하는 component에 propTypes를 작성해준다. 예를들어 Food라는 컴포넌트가 있다하면 해당 컴포넌트에 props가 제대로 전달되는지 확인하고자 할때 아래 사진과 같이 작성한다. 객체의 property에는 컴포넌트에 전달할 property명을 작성하고 값에는 체크할 내용을 작성한다. string이라고 적은것은 타입을 확인하는것이고 string 이외에도 number, bool, array, object 등 많은 타입을 검사할 수 있다. isRequired는 props로 값이 들어왔는지 안들어왔는지 확인하는것이다. isRequired를 작성하지않고 타입만 체크할 수도 있다. 만약에 모든 props가 내가 원하던대로 들어올 경우 에러가 발생하지 않지만 잘못전달된 경우 위의 사진과 같이 Food 컴포넌트에 props로 image가 전달되었지만 정의되지 않은 props라고 에러가 뜬다면 컴포넌트에 작성한 property가 잘못되었던지 혹은 Food컴포넌트에 작성된 props가 잘못되었는지 확인한다. 그리고 두번째 에러는 rating으로 number타입의 데이터가 입력되어야하지만 propTypes를 작성했기때문에 숫자가아닌 문자로 값이 전달되었다고 에러를 알려준다.

constructor(props){super(props)} 작성이유 React에서  1. 컴포넌트를 생성하거나  2. state 값을 초기화하거나 3.메서드를 바인딩할 때  사용한다. 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를 구현하지 않아도 된다.  여기에서 super는 부모클래스 생성자를 가르킨다. 리액트에서는 React.Component를 가리킨다. super(props) 선언전까지 constructor내에서는 this를 사용할 수 없다.  1번 사진 기존에는 state값을 초기화 하기위해서 1번 사진과 같이 작성했는데 클래스필드 문법을 지원하면서  2번 사진 2번 사진과 같이 작성할 수 있게되면서 메서드를 바인딩 하는경우가 아니라면 더 이상 constructor(props){super(props)}를 사용하지 않아도 된다. es6에서 화살표함수의 특성 때문에 더 이상 this를 직접 바인딩해주지 않아도 된다. .

리액트의 class 컴포넌트에서 다루는 데이터는 두개로 나뉜다.  props와 state이다. 모든 언어에서는 재활용성과 중복의 제거를 중요시한다고 배웠다.  이러한 재활용성과 중복의 제거를 토대로 코드의 재활용성을 높이기위해서 사용된것이 props이다.  props 작성된 컴포넌트에 props를 통해 부모컴포넌트에서 자식컴포넌트로 값을 전달하면 내가 원하는 값이 자식 컴포넌트에서 작성한 템플릿에 값을 넣어 반환한다. props는 html코드에서 attribute(속성)과 비슷한 형태로 작성되고 이렇게 작성된 props로 전달되는 값을 자식 컴포넌트에서 {this.props.속성명}으로 부모컴포넌트에서 전달한 props 값을 전달 받아 출력한다. 아래의 예제를 보면  App.js 는 부모컴포넌트 Introduce.js 는 자식 컴포넌트 App.js import React , { Component } from 'react' ; import Introduce from './Introduce' ; export default class App extends Component { render () { return ( < div > < Introduce name = '리액트' age = '100' />< br /> < Introduce name = '자바스크립트' age = '200' gender = '중성' />< br /> < Introduce name = 'CSS' age = '300' gender = '남자' />< br /> < Introduce name = '컴포넌트' age = '