BelieveCom

리액트(React)는 다양한 UI를 사용해서 스크립트를 작성할 수 있습니다. 오늘은 가장 많이 사용하는 리액트(React) UI 라이브러리인 Material-UI 설치 방법을 알아보겠습니다.

Material-UI는 구글 메테리얼 디자인을 기반으로 제작된 UI라이브러리입니다. 다양한 레퍼런스가 있어 참고하기 좋고 커스터마이징도 잘되어 있어 쉽게 사용할 수 있습니다. 테마 기반으로 제작도 가능하기 때문에 UI 전체를 빠르게 변경할 수 있습니다.

https://mui.com/

리액트(React) UI라이브러리 material-ui 설치는 홈페이지에서 바로 확인할 수 있습니다.

설치 하고 싶은 프로젝트에서 "npm install @material-ui/core" 명령어를 사용해서 UI 라이브러리를 설치합니다.

material-ui 아이콘도 사용하고 싶다면 "npm install @material-ui/icons" 명령어를 사용해서 아이콘을 설치합니다.

설치된 UI 라이브러리는 node_modules 폴더에서 확인이 가능합니다.

간단하게  material-ui를 호출해보겠습니다. 먼저 라이브러리를 import해야 합니다.

"import { Button } from "@material-ui/core""를 코드를 사용해서 소스에 라이브러리를 import 해주세요.

3가지 타입 버튼을 구성하겠습니다.

<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>

간단하게 버튼 스크립트를 작성하면 3개의 버튼을 확인할 수 있습니다.

리액트(React) 기본 타입 아래쪽에 타입에 따른 material-ui button이 구성됩니다.

간단한 버튼 오브젝트이지만, 일반 버튼과 큰 차이가 있습니다. 간단하게 UI를 이쁘게 구성할 수 있어 material-ui 사용은 좋은 방법이라고 생각됩니다. 지금 바로 설치해서 사용해보세요.

감사합니다.

React를 사용해서 오래간만에 프로젝트를 생성하려고 하니까 오류가 발생하면서 프로젝트가 생성 안됩니다.

"You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1)" 내용으로 create-react-app을 삭제 후 다시 인스톨하라고 합니다.

"npm uninstall -g create-react-app" 명령어를 사용해서 careate-react-app을 삭제합니다.

정상적으로 삭제되면 아래 내용처럼 패키지를 삭제합니다.

두 번째 yarn을 사용해서 global create-react-app을 삭제해야 합니다. 그런데 yarn이 설치가 안되어 있습니다.

yarn은 자바스크립트 패키지 매니저로 npm을 사용해서 설치해줍니다.

"npm install --global yarn" 명령어를 사용해서 설치합니다.

yarn을 설치하고 "yarn global remove create-react-app" 명령어를 실행해서 create-react-app을 삭제합니다.

정상적으로 삭제 후 "npm add create-react-app" 명령어를 사용해서 create-react-app을 다시 설치합니다.

npx create-react-app 명령어를 사용해서 프로젝트를 생성하면 정상적으로 패키지가 설치됩니다.

1. npm uninstall -g create-react-app
2. yarn global remove create-react-app
3. npm add create-react-app
4. npx create-react-app createreact

4가지 명령어를 순차적으로 진행하면 react 버전 오류를 해결할 수 있습니다.

생성된 프로젝트는 정상적으로 컴파일되어 Learn React를 확인할 수 있습니다.

감사합니다.

리액트(React)를 사용하면 클라이언트에서 다양한 기능을 실행할 수 있어 서버에 부하를 최소화할 수 있습니다. 오늘은 증감, 감소 버튼을 사용해서 서버 연결 없이 클라이언트에서 카운트를 실행할 수 있는 리액트(React) Component를 만들어 보겠습니다.

먼저 리액트(React)를 사용해서 기본적으로 접근할 수 있는 함수를 만들어 보겠습니다.

function formatName(user : any){
    return user.firstName + ' ' + user.lastName;
}
const user = {
    firstName: '365',
    lastName: ' talk'
};

formatName 함수는 user 메서드 firstName, lastName를 사용해서 이름을 생성하는 함수입니다.

<h1>
    Hello,{formatName(user)}!
</h1>

'{' 기호를 사용해서 formatName 함수를 호출하면 user 이름을 확인할 수 있습니다.

리액트(React)는 간단하게 함수를 만들 수 있고, 태그를 사용해서 함수에 접근 가능합니다. 출력 결과 user 이름을 확인할 수 있습니다. 기본적으로 함수 및 Component를 만들어서 다양한 기능을 개발할 수 있습니다.

증감, 감소 기능을 구현하기 위해서 useState를 사용해서 counter를 진행하겠습니다.

const [counter, setCounter] = useState(0)

useState는 리액트(React)에 사용되는 Hook 입니다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해 줍니다. 간단하게 말하면 내장 Hook 기능으로 선언된 변수를 클라이언트에서 지속적으로 접근 변경이 가능한 컴포넌트(Component)입니다.

이젠 선언된 counter을 사용해서 버튼에 연동하겠습니다.

<h4> You clicked { counter } times</h4>
<div>
    <button onClick={()=> setCounter(counter + 1)}> Increase</button>
    <button onClick={()=> setCounter(counter - 1)}> Decrease</button>
</div>

counter state를 사용해서 증감 연산에 따른 변수를 출력하고 두개의 버튼을 사용해서 setCounter 함수를 호출합니다. state로 선언된 counter에 증감, 감소를 적용해서 counter 내용을 변경합니다.

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
    const [counter, setCounter] = useState(0)
    function formatName(user : any){
        return user.firstName + ' ' + user.lastName;
    }
    const user = {
        firstName: '365',
        lastName: ' talk'
    };

  return (
    <div className="App">
      <header className="App-header">
          <h1>
              Hello,{formatName(user)}!
          </h1>
          <div>
              <h4> You clicked { counter } times</h4>
              <div>
                  <button onClick={()=> setCounter(counter + 1)}> Increase</button>
                  <button onClick={()=> setCounter(counter - 1)}> Decrease</button>
              </div>
          </div>

      </header>
    </div>
  );
}

export default App;

컴파일을 실행 후 Increase, Decrease 버튼을 클릭하면 변수가 증감, 감소하는 것을 확인할 수 있습니다. 클라이언트 재 실행 없이 state에 접근할 수 있어 Ajax보다 편리하게 사용할 수 있습니다.

이번에는 증감, 감소 버튼을 출력하는 컴포넌트(Component)를 만들어 보겠습니다.

먼저 TypeScript File 메뉴를 선택해서 jsx 파일을 생성합니다.

두 개의 타입을 선택할 수 있는데 아래쪽에 있는 jsx 파일을 선택하고 이름을 입력하면 .jsx 파일을 확인할 수 있습니다.

import React, {Component} from 'react';

class Count extends Component {
    constructor(props : Count) {
        super(props);
        this.Increase = this.Increase.bind(this);
        this.Decrease = this.Decrease.bind(this);
    }
    state=
        {
            counter : 0
        }
    Increase = ()=>{
        this.setState({
            counter:this.state.counter+1
        })
    }
    Decrease = () =>{
        this.setState({
            counter:this.state.counter-1
        })
    }
    render() {
        return (
            <div>
                <div>number {this.state.counter}</div>
                <button onClick={this.Increase}>Increase</button>
                <button onClick={this.Decrease}>Decrease</button>
            </div>
        );
    }
}

export default Count;

Component를 상속 받고 constructor을 사용해서 컴포넌트(Component) 실행 시점에 초기화를 진행합니다.

state에 counter을 0으로 초기화하고 Increase, Decrease 함수를 선언합니다. 각 함수는 counter을 사용해서 내부 state에 접근 후 증감, 감소를 실행합니다.

2개의 버튼을 사용해서 onClick 이벤트에 Increase, Decrease 함수를 연동합니다. 이제 Count 컴포넌트(Component)가 완성되었습니다. 이제 완성된 Count 컴포넌트(Component)를 App.tsx에 호출해보겠습니다.

import Count from './Count'

상단에 import를 사용해서 Count.tsx 위치를 설정합니다.

컴포넌트(Component)는 태그를 사용해서 호출이 가능합니다.

<div>
    <h4>
        Count Component
    </h4>
    <Count> </Count>
</div>

하단에 <Count> </Count> 태그를 선언하고 컴파일을 진행합니다.

App.tsx 메인에 저장된 버튼 아래쪽에 Count 컴포넌트(Component)가 위치하는 것을 확인할 수 있습니다. 기존과 동일하게 동작하는 것을 확인할 수 있습니다. 리액트(React)는 컴포넌트(Component)를 사용해서 다양한 UI를 빠르게 전환할 수 있습니다. 내장 HOOK은 브라우저 새로고침 없이 state에 접근이 가능해서 서버 통신을 최소화할 수 있습니다. UI를 컴포넌트(Component) 기반으로 댜앙하게 개발하면 재 사용을 높일 수 있어 빠른 개발에 도움을 줍니다. 

감사합니다.

리액트(React)를 사용하면 클라이언트에서 다양한 코드를 사용할 수 있어 Web 화면 변화에 따라서 다양한 구성이 가능합니다. 오늘은 리액트(React)를 사용해서 이미지 업로드 전에 이미지를 미리 보는 방법을 알아보겠습니다. 

URL.createObjectURL() 객체를 사용해서 이미지를 확인하겠습니다. createObjectURL() 메서드는 URL을 DOMString으로 반환합니다. 반환된 정보를 사용해서 이미지 정보를 저장하고 이미지를 출력하겠습니다.

기본 구조는 매우 간단하게 "파일 선택", "미리 보기 이미지", "삭제"로 구성하겠습니다.

먼저 리액트(React) 컴포넌트 useState를 사용해서 값 변화를 관리하겠습니다.

import React, {useState} from 'react';

상단에 useState 컴포넌트를 import 합니다.

useState를 사용하기 위해서 이미지 변수를 선언합니다.

const [fileImage, setFileImage] = useState("");

리액트(React) useState 컴포넌트를 호출하면 배열을 반환합니다. 첫 번째 파라미터는 현재 상태이고, 두 번째 파라미터는 Setter 함수입니다.

  const saveFileImage = (event: React.ChangeEvent<HTMLInputElement>) =>{
    // @ts-ignore
    setFileImage(URL.createObjectURL(event.target.files[0]));
  };

이미지 정보를 저장하기 위해서 HTMLinputElement 이벤트가 발생하면 URL.createObjectURL을 사용해서 DOMString을 setFileImage Setter 함수를 사용해서 저장합니다.

  const deleteFileImage = () =>{
    URL.revokeObjectURL(fileImage);
    setFileImage("");
  };

마지막으로 저장된 이미지를 삭제할 수 있는 deleteFileImage를 정의합니다. URL.revokeObjectURL 메소드를 사용해서 객체를 초기화하고, setFileImage Setter 함수를 사용해서 useState 컴포넌트를 초기화합니다.

이제 선언한 메서드를 사용해서 HTML를 구성해보겠습니다.

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  const [fileImage, setFileImage] = useState("");
  const saveFileImage = (event: React.ChangeEvent<HTMLInputElement>) =>{
    // @ts-ignore
    setFileImage(URL.createObjectURL(event.target.files[0]));
  };
  const deleteFileImage = () =>{
    URL.revokeObjectURL(fileImage);
    setFileImage("");
  };
  return (
      <>
        <h1>이미지 업로드 </h1>
          <div style={{
              alignItems: "center",
              justifyContent: "center", }} >
              <input
                  name="imggeUpload"
                  type="file"
                  accept="image/*"
                  onChange={saveFileImage} />
            </div>
              <div>
                <h1>미리보기 이미지</h1>
              </div>
                <div>{fileImage && ( <img alt="sample" src={fileImage}
                                           style={{ margin: "auto" }} /> )}
                <button style={{
                  width: "50px",
                  height: "30px",
                  cursor: "pointer", }}
                        onClick={() => deleteFileImage()} > 삭제 </button>
              </div>
      </>
  );
}
export default App;

input 태그를 이용해서 파일을 선택하고 saveFileImage 메서드를 호출해서 useState를 저장합니다.

저장된 useState는 img 태그 src에 연결해서 이미지를 화면에 출력할 수 있습니다.

업로드하기 위한 이미지를 선택하면 미리 보기 이미지 아래쪽에 선택한 이미지를 확인할 수 있습니다. 이미지를 먼저 확인이 가능해서 업로드 시 매우 편리하게 사용할 수 있는 기능입니다.

삭제 버튼을 클릭하면 deleteFileImage를 호출해서 메모리를 초기화하고 저장된 이미지를 삭제합니다.

리액트(React) useState를 사용해서 화면 전환에 따른 값을 저장할 수 있어 다양한 기능을 사용할 수 있는 정말 편리한  기능입니다. 리액트(React) 공부 지금 바로 시작하세요.

감사합니다.

리액트(React)를 사용하면서 기존 JS 프로젝트를 TS로 변경해서 사용할 경우 특정 오류가 발생합니다.

Parameter 'user' implicitly has an 'any' type.

user를 선언하고 사용할 경우 접근에 따른 타입 오류가 발생합니다.

error 내용을 확인하면 암묵적으로 'any' 타입으로 지정되어 있다는 경고입니다. 이를 해결하기 위해서는 props에 맞춰 interface를 선언하거나, props의 타입을 지정하면 됩니다. 

또 다른 방법은 절대적(implicit)으로 설정된 any 타입을 명백하게(explicit) any라고 선언하면 됩니다.

function formatName(user : any){
    return user.firstName + ' ' + user.lastName;
}

대부분 동일한 문제에서 any를 사용하면 되지만, 미지정 타입 오류 이기 때문에 너무 많이 사용할 경우 코드 가독성이 떨어지고, 오류를 확인하기 힘들 수 있습니다. any 사용은 정말 타입을 모르겠거나, 명시하기 어려울 경우만 사용해주세요.

감사합니다.

리액트(React)는 다양한 프로그램을 사용해서 컴파일이 가능합니다. 오늘은 인텔리제이(IntelliJ)를 사용해서 프로젝트를 생성하는 방법을 알아보겠습니다. 인텔리제이(IntelliJ)는 다양한 기능을 사용할 수 있어 정말 편리하게 사용할 수 있습니다.

리액트(React) 프로젝트를 생성하기 위해서는 기본적으로 리액트(React)가 설치되어 있어야 합니다. 인텔리제이(IntelliJ)를 설치하고 File -> New -> Project 메뉴를 선택해주세요.

하단에 있는 javaScript 메뉴에서 React를 선택하고 Next 버튼을 클릭합니다.

리액트(React) 프로젝트 만들기 창이 출력되면 프로젝트를 생성하기 위한 폴더를 선택합니다. 가장 중요한 선택은 "Create TypeScript Project"를 체크해야 모든 프로젝트 파일을 생성합니다. 체크를 안 하면 빈 프로젝트를 생성합니다.

create-react-app을 사용해서 프로젝트를 생성합니다. 생성 시간은 전체 패키지를 설치하기 때문에 시간이 조금 걸립니다.

생성한 폴더로 이동하면 리액트(React) 프로젝트 파일을 확인할 수 있습니다.

인텔리제이(IntelliJ) 프로젝트 창에서 리액트(React) 소스를 모두 확인할 수 있습니다. src 폴더에 있는 소스 파일을 수정하면 기본적인 리액트(React) 스크립트를 변경할 수 있습니다.

리액트(React)를 컴파일 하기 위해서 위쪽에 있는 npm start 우측에 있는 컴파일 버튼을 클릭해주세요.

별 문제가 없다면 위 내용 처럼 컴파일이 진행되면서 리액트(React) 뷰를 확인할 수 있습니다.

Terminal 창에서 npm start를 사용해서 컴파일도 가능하기 때문에 Command를 좋아하면 Terminal을 사용해주세요.

컴파일 결과 기본 브라우저로 리액트(React) 로그를 확인할 수 있습니다. 인텔리제이(IntelliJ)는 리액트(React) 및 스크립트를 사용할 수 있어 코딩하기 매우 편리합니다. 인텔리제이(IntelliJ)는 유료 제품으로 사용 가능하지만, 학생일 경우 무료로 이용 할 수 있습니다. 학생으로 사용하면 1년 단위로 업데이트가 가능하기 때문에 학생이라면 지금 바로 인텔리제이(IntelliJ)를 설치해서 리액트(React)를 공부해보세요.

감사합니다.

요즘 많은 사람들이 Web에 사용하는 라이브러리 리액트(React) 설치 방법을 알아보겠습니다. 리액트는(React) 빠른 응답 속도로 프론트엔드(Front-End)에 많이 사용됩니다.

리액트(React)를 사용하기 위해서는 먼저 가장 기본이되는 Node.js를 설치해야 합니다.

http://www.nodejs.org 로 이동해서 최신 LTS 버전을 다운로드해주세요.

다운로드된 Node.js 설치 파일을 실행하면 Node.js 및 npm Package를 설치할 수 있습니다.

npm 버전을 확인하기 위해서 cmd 상에서 npm -v를 입력합니다. 버전은 8.1.2입니다.

이제 리액트(React)를 편집하기 위해서 Visual Studio Code를 설치합니다. 

https://code.visualstudio.com 로 이동해서 실행 파일을 다운로드해주세요.

다운로드 버튼을 클릭하면 페이지가 이동되면서 셋업 파일을 다운로드할 수 있습니다.

Visual Studio Code 설치 파일을 더블 클릭해서 설치를 실행합니다.

설치가 완료되면 Visual Studio Code가 실행됩니다. 소스 파일만 수정이 필요하기 때문에 별도 Add-in 설치는 필요 없습니다. 이제 리액트(React)를 사용하기 위한 기본 준비가 완료되었습니다.

npm 명령어를 사용해서 리액트(React) create-react-app을 설치해줍니다.

create-react-app 명령어를 사용해서 리액트(React) 프로젝트 파일을 자동으로 생성할 수 있습니다.

이제 리액트(React)를 실행하기 위한 폴더를 만들어 줍니다. 하위 폴더로 프로젝트가 생성되기 때문에 공통 이름으로 폴더를 만들면 좋습니다.

만들어진 폴더로 이동해서 명령어 창에서 cmd를 입력합니다. cmd 기본 경로가 만들어진 폴더로 이동합니다.

create-react-app react-start를 입력해서 프로젝트를 생성합니다. 명령어 뒤에 프로젝트 이름을 입력하는데 소문자만 프로젝트 생성이 가능합니다.

create-react-app을 실행하면 천 개 넘는 파일을 다운로드하면서 프로젝트 파일이 생성됩니다. 생각보다 많이 오래걸립니다.

폴더로 이동하면 node_modules, public, src 폴더를 확인할 수 있습니다. 소스 수정은 src폴더에서만 수정하면 됩니다.

소스를 확인하기 위해서 cmd 창에서 code . 를 입력하면 Visual Studio code가 실행되면서 프로젝트 파일을 로드합니다. EXPLORER에서 리액트(React) 프로젝트 파일을 확인할 수 있습니다.

이제 생성된 프로젝트 파일을 실행해보겠습니다. cmd로 생성된 프로젝트 경로로 이동 후 npm start를 입력하면 리액트(React) 코드가 컴파일되면서 설정된 기본 브라우저로 실행됩니다.

리액트(React)는 javaScript 기반이기 때문에 보안 액세스 허용을 실행해야 합니다.

브라우저(Browser)가 실행되면서 기본 리액트(React) 실행 화면을 확인할 수 있습니다.

실행을 종료하기 위해서는 cmd 창에서 Ctrl+C를 두 번 눌러주면 작업 끝내기 메시지를 확인할 수 있습니다. 여기서 'Y'를 입력하면 리액트(React)가 종료됩니다.

리액트(React) 설치는 조금 복잡하지만 프래임워크 처럼 사용하는 게 아니기 때문에 쉽게 설치할 수 있습니다. 프론트엔드(Front-end)에 관심 있다면 지금 바로 설치해보세요.

감사합니다.