개발자의 개발 블로그

리액트 설치 후, 프로젝트를 오픈했다.

그리고 파일을 열었는데... 한 화면에서 계속 바뀌면서 열렸다.

여러개 뜨는 걸 예상했기때문에 당황스러웠다.

뭐지?

a

b

c

d

파일이 있다고 하면,  a b c d 선택을 하면 파일 4개가 열려야하는데...

a에서 b누르면, a있던 곳에서 b가 나오고,,,

b에서 c누르면, b있던 곳에서 c가 나오고,,,

c에서 d누르면, c있던 곳에서 d가 나오고,,,

결국하나만 나온다.

검색해봤다.

위 3개중에 중간 Workbench > Editor: Enable Preview를 

체크 해제해주면 된다.

쉽다. 좋다. 해결. 끝.

제목에서 이미 해결방법이 나왔다.

 Hook을 사용할 때...

이렇게 작성을 해야 버튼을 눌렀을 때, 1씩 올라가는 예제가 정상적으로 만들어진다.

그런데, 

const [count, setCount] = useState(0);

이 부분을 App() 컴포넌트 밖으로 선언하게 되면 에러가 발생한다.

영어를 좀 하면 해결할 수 있다.

훅(Hook)은 반드시 함수 컴포넌트 내부에 호출해야한다.

잘 쓰던 Prettier가 갑자기 동작을 안 한다.

정렬이 안 된다.

예쁜이가 왜 동작을 안 할까?

검색해봤다.

찾았다.

VS Code를 업데이트했었는데

Preference -> Settings에서 

Format on save

을

체크가 해제되어 있는 것을 볼 수 있다.

어휴.

체크를 다시 해주면 해결!!

저장하는 순간 정렬해준다. 

한번 맛들이면 너무 편해...없으면 허전해..

파일을 (컴포넌트를) 생성할때, import를 일일이  선언하고

클래스 컴포넌트를 만들때 클래스 틀을

함수 컴포넌트를 만들때 함수 틀을 전부 수기로 입력하는 것은 개발할 때 매우 비효율적이다.

아니면 

파일 또는 코드 복붙하는 방법도 있지만...

해당 클래스명(함수명)을 수정하고 필요없는 부분을 없애줘야한다. 

그래서 이 React Snippet이 필요하다. 유용하다.

이것을 설치하면 매우 편하다.

물론 외워야하지만... 금방 외울 수 있을 것이다.

설명이 아래 존재하므로 읽으면서 해보면 된다.

리액트에는 JSX라는 문법이 있다.

완전히 HTML과 동일한데(완전히는 아니지만... 거의..) 이것은 실제 자바스크립트에 해당된다고 한다.

어쨋거나...

JSX를 작성하다보면 당황스럽다...

.html 파일에서는 태그명만 입력하면 입력한 문자와 관련된 태그가 뜨고, 엔터만 치면 HTML 태그가 생성됐었는데.

JSX에서는 < 부터  /> 까지 전부 입력해줘야하는건가?

당황스럽다. 말도안되.  찾아봤다.

3초만에 해결하였다.

https://medium.com/@afulsamet/vs-code-react-js-tools-d61122dfb923

1. Settings에 들어간다.

2. settings를 입력하고, 쭉쭉 내리다보면 이미지와 같이 JSON을 볼 수 있다.

그리고, 그 아래 Edit in settings.json을 클립해서 들어간다.

맨 아래 닫히는 중괄호 위에 }

,  를 입력하고

"emmet.includeLanguages": {
"javascript": "javascriptreact"
}

을 추가해준 뒤, 저장하고 나온다.

해결되었다.

h1 입력하면 화면에 나온다. 엔터를 치면 자동으로 태그가 생성되는 것을 볼 수 있다.

고민 해결!

https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

이것을 사용하면 된다.

코드를 복붙하거나...

파일을 복붙하거나...

하면 수정해야 할 부분이 많다...

그냥 위에 패키지를 설치한 뒤,

클래스 기본이나 함수 기본 또는 자주쓰는 react-dom이나 redux와 같은 것을 한꺼번에 생성할 수 있어서 좋다.

App.js 파일 생성후에, rcc 를 입력하면?

import React, { Component } from "react";

class App extends Component {

render() {

return <div> </div>;

}

}

export default App;

이 틀이 그냥 생성된다!

rsc를 입력하면?

import React from 'react';

const App = () => {

return (

<div> </div>

);

};

export default App;

이와같이 함수 컴포넌트가 생성된다. 

대박~

faker라는 npm이다.

페이커 프로게이머 페이커말고...

https://www.npmjs.com/package/faker

npm install -s faker

입력하면 설치가 된다.

사용 방법은 다음과 같다.

1. import를 해준다.

import faker from "faker";

2. 이미지에 src에서 faker를 불러주면 끝!

<img src={faker.image.avatar()} alt="random test image" />

이렇게하면 img에 이미지가 나오게 된다.

avatar()대신 사용할 수 있는 목록은 위 링크에 있으니 필요한 것을 적용하면 된다.

웹에서 갖고 오는 것이므로, 리프레시(F5)를 하게되면 이미지는 계속 바뀐다.

이상.

1. VS Code 설정에 들어간다.

2. settings.json 파일로 접속한다. 오른쪽 상단에 동그라미 부분 

3. 아래와 같이 입력한다

JSX에서는 HTML snippet이 적용이 안 되서, 

하나하나 직접 작성해야하나?

너무 비효율적인데... 에러 많이 날텐데

하고 구글하다가 찾은 방법이다.

ㅇ ㅑ호 

     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)} 으로 하면 절대 안 된다.

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

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

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

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

무한반복에 빠질 수 있다.