개발자의 개발 블로그

배열(array)에 있는 child는 반드시 고유한 key props를 갖어야한다.

리액트에서는 엘리먼트가 많을 경우 key를 설정해주어야한다. 

Link를 Router 밖에서 사용할 수 없다.

Link는 react-router-dom에서 가져와 쓸 수 있기 떄문에, Router에 의존적이다.

따라서, Link가 포함된 컴포넌트를 Router 안에 들어가 있어야 사용이 가능하다.

텍스트필드에, 잘못된 값을 집어넣거나 빈 값을 입력했다면 경고를 띄우고 싶다.

어떻게 하면 될까?

errorText라는 속성이 있었으나, 요즘은 error와 helperText를 사용하면 된다.

텍스트필드를 빨간색으로 변화시켜 에러처럼 보이게 만드는 것이 error 속성이다.

error는 true/false 즉, Boolean형으로 값을 지정할 수 있다.

조건을 걸면 된다.

요런식으로 사용하게 되면 ,조건에 따라 체크된다.

helperText의 경우, error 밑에 출력되는 문자열로 에러가 났을 때

어떤 이유로 에러가 발생했는지 알려주기 위한 용도로 사용된다.

DatePicker를 사용할 수도 있지만,

npm을 설치해서 리액트 캘린더를 사용하려고 한다.

먼저, 

https://www.npmjs.com/package/react-calendar

이 사이트에 들어가면 확인할 수 있다.

1. 설치

$ npm install react-calendar 또는

$ yarn add react-calendar으로 설치하면된다.

<Calendar /> 호출하게 되면, 달력이 나온다.

새로운 date 값을 얻기 위해서는 onChange 이벤트를 사용하면 된다.

또한, 오늘 날짜를 강조하고 싶다면, value값으로 Date() 를 주면 된다.

              <Calendar

                className={classes.calendar}

                onChange={this.onDateChange} 

                value={this.state.date}

              />

state에서는 

state= {

    date: new Date(),

}

이런식으로 있을 것이다. 

  onDateChange = date => { 

    this.setState({

      date: moment(date).format("YYYY-MM-DD")

    })

  };

이렇게 하게 되면, 선택한 날짜가 dete값으로 들어가 원하는대로 날짜를 찾을 수 있다.

class App extends Component {

  render() {

    return (

      <div className="body">

        <Login />

    );

  }

}

이렇게 있는데, 가로 100%, 세로 100%로 크기를 지정하고 싶다면,

쉽게 생각하면

가로 width : 100%

세로 height : 100%

로 하면 될 것 같다. 하지만, 가로는 적용되지만, 세로는 적용되지 않는다.

위에 사진의 경우 아랫쪽 배경이 흰색이라 보이지 않지만, 로그인 폼 부분의 높이만 aqua색이 적용된 것이다.

그렇다면, 어떻게 높이를 전부 바꿀 수 있을까?

HTML이라면, body를 바꾸면 되지만, React에서는 다른 방법이 존재한다.

바로, 단위를 % 말고, 다른 것으로 하면 된다.

여기서 답을 찾았다.

https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573

바로 vh와 vw 단위를 사용하면, 너비값과 높이값을 부모 요소에 맞게 사용할 수 있다. 

vh 요소는 높이값의 100분의 1의 단위입니다. 

예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이다. 즉, 100vh는 브라우저 높이의 전체이다.

이와 유사하게 뷰포트의 너비값이 750px이면 1vw는 7.5px이 됩니다. 따라서, 100vh는 브라우저 너비 전체이다.

즉, 최대 높이값이를 제작할때 100vh로 사용하면 된다.

height를 px등으로 지정하는 것과 달리, 브라우저의 높이가 줄어들거나 늘어나도

vh단위는 1/100 이므로 100vh 설정을 했기 때문에 항상 전체 높이를 잡을 수 있다.

드디어 리액트에서 scss를 사용하기 편리해졌다.

v2가 릴리즈되면서 매우 편해졌다.

지난번까지는 

yarn eject를 해서, css 부분을 복사해 하단에 붙여넣고 sass-loader를 추가하고 

나름 복잡한 작업을 해줘야 SCSS를 인식했다.

하지만, 업데이트되면서,

node-sass만 설치해준뒤,

CSS파일을 불러오듯이,  --> import './App.css';

SCSS파일을 불러와서 사용하면 된다. --> import './App.scss';

와우!

편해졌다.

만약,  node-sass를 설치하지 않고 scss를 사용하려고 한다면 다음과 같은 에러가 발생한다.

쉽게 해석하면,

sass 파일을 import하기 위해서는 node-sass를 설치하라!

라는 의미이다.

yarn add node-sass

또는

npm install node-sass 를 입력한다.

(예제)

TestComponent.js를 하나 만든다. 그리고, scss 파일을 import한다.

TestComponent.scss를 만든다.

App.js에서 TestComponent.js를 import한 뒤, 삽입한다.

이렇게한뒤, 

css를 사용하는 것처럼 적용된다.

     yarn add react-router-dom

     npm install react-router-dom

을 아무리 해도, 사용하려하니 설치가 되지 않았다(해당 모듈을 찾을 수 없다)는 에러가 발생한다.

검색을 해봤더니,

package.json에 저장이 되어있는지 확인해보란다.

확인해봤다.

없다.

어떻게 없을수가 있지? 

yarn으로, npm으로 5번을  넘게 설치했다.

다음과 같이 설치하면 된다.

    npm install --save react-router-dom

--save?

저장하라는 건가보다.

사용된다.

리액트를 다루는 기술이라는 책을 보며 궁금한 점을 적어보았다.

[DOM 관련]

1. 자바스크립트 DOM은 어떤 의미일까? 너무 크고 머릿속에 안 들어옴.

2. 자바스크립트 DOM과 리액트의 가상(Virtual) DOM의 차이점은 무엇인가?

[var와 const 그리고 let의 스코프 차이]

var = 

[부모 컴포넌트 & 자식 컴포넌트]

부모 컴포넌트 : B라는 컴포넌트를 불러와서 사용하는 App.js 컴포넌트가 부모.

B 컴포넌트 : 불려쓰이는 컴포넌트를 자식 컴포넌트. App.js로부터 props값을 전달받아 사용함.

 [p.85]

ES6의 화살표 함수와 일반 function을 이용한 함수 선언 함수의 차이점.

- 완전히 대체하는 것은 아니다

[p.137]

... 전개 연산자(Spread operator)

...뒤에 위치한 배열값을 그대로 꺼내서 현재 배열에 복사하는 것.

[p.146]

컴포넌트 라이프 사이클 활용 예제

[p. 157]

함수형 컴포넌트와 클래스 컴포넌트의 속도 차이.

함수형이 더 빠르다고 블로그에 나왔는데 뭐가 더 빠른걸까?

[Todo 리스트 구현]

e.stopPropagation();

이벤트의 확산을 막아 멈춰준다.

즉, 이벤트가 해당 부모의 이벤트까지 전달되지 않도록 도와준다.

e.stopPropagation(); 을 하지 않으면,

onRemove를 호출하려고 클릭을 하면, onRemove함수만 실행되는 것이 아니라,

해당DOM의 부모의 클릭이벤트에 연결되어있는 onToggle도 실행되어 

정상적인 동작을 할 수 없다.

따라서,

e.stopPropagation();을 통해 이벤트가 해당 부모의 이벤트까지 확산되어 전달되지 않도록 해야한다.

onClick={() => onToggle(id)} 으로 호출해야한다.

onClick={onToggle(id)} 으로 하면 절대 안 된다.

위에는 함수를 단순히 선언한 것이므로, 눌렀을 때 함수가 실행되지만,

아래는 함수를 호출한 것이므로, 해당 함수가 렌더링될때 호출된다.

호출되면 -> 데이터에 변화가 생길 것이고 변화가 생기면? ->  

-> 또 렌더링 -> 또 호출 -> 또 데이터 변화 -> 또 렌더링 -> 또 호출.

무한반복에 빠질 수 있다. 

import 문에서 궁금한 점이 생겼다.

어떤 것은 그냥 import하고, 어떤 것은 중괄호{ } 안에 변수? 를 적어준다는 것이다.

무슨 차이가 있는지 검색해봤다.

만약, 아래와 같은 코드가 있다고 해보자.  

이 파일은 이제부터 React와 render라는 변수를 사용할 수 있다. 

React변수는 react패키지에서 불러왔고, 

render 변수는 'react-dom'이라는 패키지에서 불러왔다.

그런데, 

첫 번째는 그냥 React인데, 두 번째는 { render }처럼 괄호 안에 감싸져 있다. 

차이점은, 보내주는 export 방식의 차이였다. 

모듈을 불러올 때 import라고 써주는 것처럼, 

모듈을 다른 파일로 보내려면 export라고 명시적으로 써줘야한다. 

예를 들어보면,

App.js에서 다음과 같이 선언한다.

위와같이 App.js에서 세 가지 방식으로 export를 했다. 

변수 a는 객체에 담아서 export하고, 변수 c는 선언 및 초기화와 동시에 바로 export 했다. 

또한, 변수 b는 독특하게 앞에 default라는 키워드를 붙인 채 export했다. 

또 다른 함수 Sub.js에서 App.js에 export한 것들을 불러오려고 한다.

와 같이 작성한다.

(해석)

App.js에서 export한 값들을 불러오려면,

Sub.js에서는 코드 윗쪽에 import를 선언하면 된다.

from './App' 부분이 App.js로부터 해당 파일로 불러와 사용하겠다는 의미이다. (js는 생략해도 된다) 

그런데 뭔가 이상하다.

처음보는 d는 괄호 없이 불러오고, 

나머지 a, c는 괄호 안에서 불러옵니다. 또한, c는 뒤에 as e라고 되어있네요.

default는 번역하면 기본이라는 뜻이다. 

말그대로,default 로 export한 b는 괄호를 사용하지 않아도 import할 수 있습니다. 

그리고 변수명도 Sub.js에서 마음대로 지을 수 있습니다. 

위 코드에서는 변수 d가 바로 변수 b를 import한 것이다. 

나머지 a와 c는 반드시 export할 때의 이름을 그대로 import해야 하며, 괄호 안에서 불어와야 합니다.

괄호 안의 변수도 이름을 바꾸고 싶다면, as 라는 키워드를 사용해 바꿀 수 있습니다. 

c as e라고하면, 변수 c의 값을 변수 e로 넘겨주는 겁니다. 

이렇게 하면 변수 e를 c 대신 사용할 수 있습니다. 

이것은 두 개 이상의 패키지에서 같은 변수 이름을 사용해 변수가 겹칠 때, 

이름을 다르게 바꿀 수 있어 유용하다.