개발자의 개발 블로그

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

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

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

뭐지?

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이 적용이 안 되서, 

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

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

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

ㅇ ㅑ호 

일단, React의 데이터 흐름은 단방향이다.

단방향 = 한 방향 = 위에서 아래로 내려간다 

즉, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨주는게 일반적이다.

부모 컴포넌트는(상위 컴포넌트)는 컴포넌트들을 사용하는 컨테이너 개념이다.

즉, A 컴포넌트가 B컴포넌트와 C컴포넌트를 import하여 브라우저에 보여준다면,

A 컴포넌트가 부모, B와 C가 자식 컴포넌트라고 할 수 있다.

1. 부모 컴포넌트에서 자식 컴포넌트에 값(데이터) 넘기기. 

이것이 가장 일반적인 방법이다.

create-react-app으로 리액트 프로젝트를 생성했다면, App.js가 최상위 컴포넌트라는 것을 알고 있을 것이다.

그리고, Todos.js라는 컴포넌트를 생성을 했다고 가정하면,

부모인 App.js 에 있는 데이터(state 뿐만 아니라 함수도...)를 

자식인 Todos로 보낼 수 있다. 

HTML에서 속성(Attribute)을 선언하는 식으로 "props"를 전달한다.

위 예제에서, <Todos name={this.state.name} /> 이렇게 하면, Todos로 문자열 JANG을 보낸 것이다.

이런식으로 여러개의 데이터 값들을 줄줄히 보낼 수 있다.

참고로, 이 전달된 값을 받아서 사용하기 위해서는 

Todos 컴포넌트에서 this.props.name을 사용하면 해당 데이터를 가져올 수 있다.

prop-types을 통해 props의 타입을 체크하려고 했는데 에러가 발생했다.

클래스를 함수로 부를 수 없다? 뭔말인지 한참 찾다가 발견했다.

이렇게 작성했다. 

자동생성이 아니라 하드코딩으로...

그런데, prototype으로 잘못 작성했다.

es6 이전 클래스 대신 사용하던 keyword이기 때문에 에러가 발생했다.

이와같이 propTypes로 작성해야한다.

또 주의할 점! 대문자가 아니라, 소문자  propTypes 이다.

static으로 선언된 무엇인가보다.

그리고, 타입 체크시에는 설치했던 prop-types를 사용한다.

이렇게 props의 타입을 체크하게 되면,

잘못된 형식의 props가 들어오게 되면, 

즉, 위에는 array인데 string이나 number 형태의 값이 넘겨지면,

(prop에 유효하지 않은 값이 전달되면)

자바스크립트 콘솔에 경고(Error)가 발생된다.