궁금증 해소

1.

Q. 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 감싸 주어야 할까요?

A. Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문

div로 꼭 감싸고 싶지 않을 때는 리액트v16 이상부터 도입된 <Fragment></Fragment> 혹은 <></>으로 감싸면 된다.

 

2.

JSX 내부의 자바스크립트 표현식에서는 if 문을 사용할 수 없다. JSX 밖에서 if문을 사용하거나 {} 안에 삼항연산자를 사용하면 된다. 혹은 &&연산자를 사용한다. (false를 렌더링 할 때는 아무것도 나타나지 않기 때문)

 

3.

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

A. 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다. 임의 메서드를 정의할 수 있다.

클래스형 컴포넌트에는 render 함수가 꼭 있어야 하며, 그 안에 보여 주어야 할 JSX를 반환해야 한다.

 

Q. 그럼 어느 상황에 함수형 컴포넌트를 사용하나요?

A. 함수형 컴포넌트의 장점은 다음과 같다

• 선언하기가 훨씬 편하다
• 메모리 자원도 덜 사용한다.
• 빌드하여 배포할 때도 결과물의 파일이 더 작다.

단점은 다음과 같다

• state 사용이 불가능하다
• 라이프사이클 API 사용이 불가능하다

그러나 이 단점은 v16.8 업데이트 이후, Hooks 라는 기능이 도입되면서 해결되었다.

 

 

4. Reactjs code snippets 확장 프로그램 설치

 

rsc 입력: 컴포넌트 코드 생성

rcc 입력: 클래스형 컴포넌트 입력

 

// this is rsc
import React from 'react';

const MyComponent = () => {
    return (
        <div>
            
        </div>
    );
};

export default MyComponent;


// this is rcc

import React, { Component } from 'react';

class MyComponent extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default MyComponent;

 

5.

Q. react를 쓰려는데 왜 node.js를 설치하나요?

A. create-react-app 라이브러리를 설치하기 위해서 node.js가 필요합니다. (npx, npm 툴을 이용하기 위함)

node.js > npx, npm 툴 사용 가능 > npm, npx로 cra를 설치

 

6.

Q. cra를 깔고나면 파일이 너무 많아서 헷깔려요.

A.

src/App.js가 메인페이지, 즉 html 짜는 곳이라고 생각하면 됩니다.

(물론 실제 메인 페이지는 public/index.html 입니다.)

 

코딩한 App.js를 index.html에 넣어주는 로직인데, 이것을 가능케 하는 것이 src/index.js 파일이다.

 

node_modules 폴더: 라이브러리를 모아둔 폴더

public 폴더 : static 파일 보관 폴더. 동적으로 잘 안 바뀌는 파일을 모아둔다. 빌드를 모두 다 하고 배포할 때, public파일 안에 있는 것들은 코드가 그대로 살아있다.

src 폴더 : 소스 코드 보관함. 실제 개발을 여기서 한다.

package.json 파일: 설치한 라이브러리 목록. 어떤 라이브러리를 설치하고 나면 그 라이브러리 이름과 함께 버전이 자동으로 코드된다.

 

7. 

Q. react는 왜 쓰나요?

A.

1) 데이터 바인딩이 쉽다.

기존에는 데이터를 조작하려면 js를 이용해 데이터를 변수에 담아서 그 데이터를 HTML 태그 안에 넣어 조작해야만 했다. DOM을 이용해 document.querySelector 부터 시작하여 innerHTML 등을 이용해 데이터를 넣어주는 것이 일반적이다. 그러나 react는 이럴 필요가 전혀 없다. react에는 react만의 강력한 문법, jsx가 있기 때문.

import logo from "./logo.svg";
import "./App.css";

function App() {
  let posts = "데이터바인딩";
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <h4>{posts}</h4>
    </div>
  );
}

export default App;

 

변수를 선언하고 H4 태그 안에 중괄호를 열고 해당 변수만 넣어줘도 렌더링이 가능하다.

{ 변수명 }

 

 

코드 몇 줄이 생략된 것인지 가늠할 수 없을 정도로 너무 편하다...

 

당연히 함수도 넣어줄 수 있다.

 

import logo from "./logo.svg";
import "./App.css";

function App() {
  let posts = "데이터바인딩";
  function 함수() {
    return 100;
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <h4>{함수()}</h4>
    </div>
  );
}

export default App;

 

 

이미지 import도 비슷한 방법으로 사용할 수 있다.

 

import logo from "./logo.svg";
import "./App.css";

function App() {
  let posts = "데이터바인딩";
  function 함수() {
    return 100;
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <img src={logo} />
      <h4>{posts}</h4>
    </div>
  );
}

export default App;

 

로고를 import 해서 img src 에 중괄호를 사용하여 코드를 써보면 이미지가 불러와진다.

 

순수 js로 img의 src에 이미지를 넣어주는 작업을 어떻게 하였는지 생각해보면, jsx를 쓰는 것만으로도 코드량이 줄어들고 어마어마하게 편리해진다는 것을 실감할 수 있다.

 

8.

Q. react로 스타일을 변경하고 싶어요

A. className을 정해두고 css를 임포트하여 적용해도 되지만, 인라인으로 적용하는 방법이 있다.

style 속성을 쓰면 되는데, 이때 반드시 중괄호를 시작하여 객체처럼 사용한다.

 

import logo from "./logo.svg";
import "./App.css";

function App() {
  let posts = "데이터바인딩";
  function 함수() {
    return 100;
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div style={{ color: "blue", fontSize: "30px" }}>개발 Blog</div>
      </div>
      <h4>{posts}</h4>
    </div>
  );
}

export default App;

 

style 속성 안에 하나하나 적어주는 게 귀찮고, 또 지정한 스타일을 다른 곳에서도 쓰고 싶다면 아예 변수로 빼서 계속 사용하는 것도 가능하다.

 

import logo from "./logo.svg";
import "./App.css";

function App() {
  let posts = "데이터바인딩";
  function 함수() {
    return 100;
  }
  let style = { color: "blue", fontSize: "30px" };

  return (
    <div className="App">
      <div className="black-nav">
        <div style={style}>개발 Blog</div>
        <div style={style}>다시 사용</div>
      </div>
      <h4>{posts}</h4>
    </div>
  );
}

export default App;

 

9. 그냥 같은 useState를 복붙하면 될 걸, props로 왜 전달할까?

중요한 데이터는 App 컴포넌트 안에 넣어서 props로 전달하는 것이 관습적이다.

상위 컴포넌트 > 하위 컴포넌트로 데이터를 전달해야 나중에 편하며 역으로 관리할 때도 편해진다.

 

 

10 sass 설치를 위해 node-sass를 설치 시 발생하는 에러 대처

 

Failed to compile. ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

 

node-sass 삭제 후 4.14.1 버전으로재설치한다

 

1. npm uninstall node-sass
2. npm install node-sass@4.14.1

Or, if using yarn (default in newer CRA versions)

1. yarn remove node-sass
2. yarn add node-sass@4.14.1

stackoverflow.com/QUESTIONS/64625050/ERROR-NODE-SASS-VERSION-5-0-0-IS-INCOMPATIBLE-WITH-4-0-0

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

아래를 차례차례 재설치한다.

 

1. npm cache 삭제 : npm cache clean --force

2. package-lock.json 파일 삭제: rm package-lock.json

3. node_modules파일 삭제: rm -rf ./node_modules/

4. npm 재설치 : npm --verbose install

 

 

11. import형 파일은 _reset.scss 등 언더바를 써서 작명한다

 

12. animaition 라이브러리:

yarn add react-transition-group