안경잡이개발자

728x90
반응형

  기본적으로 리액트(React) 요소에 대한 이벤트 핸들링은 기본적인 자바스크립트에서의 방식과 매우 흡사합니다. 다만 리액트 이벤트는 카멜 케이스(Camel Case) 네이밍 규칙을 사용한다는 특징이 있으며 JSX 문법을 사용해 함수를 호출할 수 있습니다.


class EventHandling extends React.Component {

  constructor(props) {

    super(props);

  }

  

  handleClick() {

    console.log('이벤트 처리');

  }

  

  render() {

    return (

      <button onClick={this.handleClick}>버튼</button>

    );

  }

  

}


ReactDOM.render(

  <EventHandling />, 

  document.getElementById('root')

);



  이후에 가장 대표적인 예제인 버튼 토글 예제에 대해서 알아보도록 하겠습니다.


class EventHandling extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      isToggleOn: true

    }

    this.handleClick = this.handleClick.bind(this);

  }

  

  handleClick() {

    this.setState(state => ({

      isToggleOn: !state.isToggleOn

    }))

  }

  

  render() {

    return (

      <button onClick={this.handleClick}>

        {this.state.isToggleOn ? 'ON' : 'OFF'}

      </button>

    );

  }

  

}


ReactDOM.render(

  <EventHandling />, 

  document.getElementById('root')

);



  자바스크립트(JavaScript)에서는 바인딩(Binding)이 기본 설정으로 제공되지 않습니다. 그래서 만약 바인딩 처리를 해주는 것을 잊으면 소스코드가 정상적으로 동작하지 않습니다

728x90
반응형

'리액트(React)' 카테고리의 다른 글

React 이벤트 처리(Event Handling)  (2) 2019.01.04
React의 LifeCycle과 API 호출  (2) 2019.01.04
React의 State  (0) 2018.12.25
React의 Component와 Props  (0) 2018.12.25
React에서 JSX란?  (0) 2018.12.25
코드펜(Codepen)을 이용한 React 개발환경 구축하기  (0) 2018.12.25

Comment +2

728x90
반응형

  이번 시간에는 React의 LifeCycle의 개념에 대해서 이해한 뒤에 API 호출에 대해서 알아보도록 하겠습니다. React는 말 그대로 프론트 엔드(Front-End) 라이브러리입니다. 따라서 서버 개발자와 API를 이용해서 소통할 수 있어야 합니다. 하지만 React를 처음 공부하시는 분은 정확히 언제 API를 호출해서 데이터를 가져와 화면에 보여주어야 할 지 감이 안 잡힐 수 있어요. 이번 시간에는 그러한 내용에 대해서 다룰 거예요.


초기 구성 ※


  React 컴포넌트 객체가 DOM에 실제로 삽입되기 전까지의 과정은 다음과 같습니다. 이러한 과정을 마운팅(Mounting)이라고 부릅니다.


  1) contructor()

  2) componentWillMount()

  3) render()

  4) componentDidMount()


  기본적으로 컴포넌트가 모두 구성된 직후인 componentDidMount() 함수에서 API 호출을 수행하면 효과적이라는 것만 기억하시면 됩니다. SNS에 처음 로그인 했을 때 최근 타임라인 데이터를 API로부터 호출해서 화면에 보여주는 것이 그 예시입니다.


※ 데이터 변경 ※


  기본적으로 화면에 특정한 객체를 렌더링하기 위해서는 props 혹은 state를 사용해야 합니다. props와 state는 이러한 과정이 서로 다르지만 대략적으로 다음과 같은 순서로 수행된다는 것을 기억하시면 됩니다.


  1) shouldComponentUpdate()

  2) componentWillUpdate()

  3) render()

  4) componentDidUpdate()


  기본적으로 컴포넌트의 데이터와 화면(View)에 출력된 내용이 다를 때 shouldComponentUpdate() 함수가 동작합니다. 이 함수는 기본적으로 true 값을 반환합니다. 또한 화면에 출력되는 화면 구성을 변경하고자 할 때는 componentDidUpdate()를 많이 사용합니다. 실제로 데이터 변경과 관련한 함수들을 우리가 처리하게 되는 일은 많지 않습니다. 


※ 컴포넌트 해제 ※


  컴포넌트가 마운팅 해제 될 때 수행되는 함수는 componentWillUnmount() 함수입니다. 우리는 이 함수를 이용해서 컴포넌트의 동작을 위해 사용되었던 메소드들의 리소스를 제거해주게 됩니다. 애플리케이션의 성능 향상을 위해서 사용되는 경우가 많은 함수입니다.


※ API 호출 예제 ※


  이제 실제로 위와 같은 라이프 사이클의 개념을 활용하여 API를 호출하는 예제를 다루어 보도록 하겠습니다. API 호출을 연습하고자 할 때는 가짜(Fake) 온라인 REST API 사이트를 이용하시면 됩니다. 


  ▶ JSON Placeholder 사이트: https://jsonplaceholder.typicode.com/

  


  사이트에 접속해서 [Try it]을 클릭해 보시면 그 결과 응답(Response) JSON 데이터를 확인할 수 있습니다.



  이제 우리는 결과 JSON 데이터에서 title 정보만 받아서 화면에 출력해보도록 하겠습니다.


※ JavaScript 소스코드 ※


class ApiExample extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      data: ''

    }

  }

  

  callApi = () => {

    fetch("https://jsonplaceholder.typicode.com/todos/1")

      .then(res => res.json())

      .then(json => {

        this.setState({

          data: json.title

        })

      })

  }

  

  componentDidMount() {

    this.callApi();

  }

  

  render() {

    return (

      <h3>{this.state.data ? this.state.data : '데이터 불러오는 중'}</h3>

    )

  }

  

}


ReactDOM.render(

  <ApiExample />, 

  document.getElementById('root')

);



728x90
반응형

'리액트(React)' 카테고리의 다른 글

React 이벤트 처리(Event Handling)  (2) 2019.01.04
React의 LifeCycle과 API 호출  (2) 2019.01.04
React의 State  (0) 2018.12.25
React의 Component와 Props  (0) 2018.12.25
React에서 JSX란?  (0) 2018.12.25
코드펜(Codepen)을 이용한 React 개발환경 구축하기  (0) 2018.12.25

Comment +2

  • 리액트꿈나무 2019.08.13 15:05

    componentWillUnmount 에서 redux에 저장되어있는 재사용성이 낮은 데이터를 지우나요 ?

  • 요즘은 함수형컴포넌트를 쓰다보니 라이프싸이클 api를 잘 사용하지 않게되네여 ㅎㅎ

React의 State

리액트(React)2018. 12. 25. 08:47
728x90
반응형

  이번 시간에는 리액트(React)의 상태(State)에 대해서 알아보도록 하겠습니다. 이 state는 고정적인 데이터가 아니라 변경될 수 있는 데이터를 처리할 때 효율적으로 사용될 수 있습니다. 재미있는 점은 실제로 state 값을 변경해서 화면(View)이 변경되면 render() 함수가 다시 실행되어 실제로 화면에 적용을 해준다는 점입니다.


  또한 state를 사용하기 위해서는 이전 시간까지 작성했던 함수형 컴포넌트 대신에 클래스형 컴포넌트를 사용하셔야 합니다. props만 이용하고자 한다면 함수형 컴포넌트를 그대로 사용하세요. 다시 말해서 내부 객체의 값이 변경될 여지가 있다면 클래스형 컴포넌트로 state를 사용하고, 그렇지 않다면 props를 사용하시면 됩니다.


  이전 시간에는 예제로 초 시계 렌더링(Rendering) 사례를 다룬 적 있습니다.


※ HTML 소스코드 ※


<div id="root"></div>


※ JavaScript 소스코드 ※


function tick() {

  const element = (

    <h3>현재 시각은 [{new Date().toLocaleTimeString()}] 입니다.</h3>

  );

  ReactDOM.render(element, document.getElementById('root'));

}

setInterval(tick, 1000);


  일단 이 구성을 지난 시간에 배운 props를 활용해 보다 객체지향적으로 바꾸어 봅시다.



※ JavaScript 소스코드 ※


function Clock(props) {

  return (

    <h3>현재 시각은 [{props.date.toLocaleTimeString()}] 입니다.</h3>

  );

}


function tick() {

  ReactDOM.render(

    <Clock date={new Date()}/>, 

    document.getElementById('root')

  );

}

setInterval(tick, 1000);



  현재 보이는 이러한 구성은 tick()이라는 특정한 함수 안에서 ReactDOM의 렌더링 함수를 불러오는 형식입니다. 이러한 방식보다 더 체계적인 구현 방식은 특정한 컴포넌트 안에서 render() 함수를 이용하여 렌더링이 수행되도록 하는 것입니다. 그러기 위해서는 Component 클래스를 상속 받아야 합니다. Component 클래스에는 내부적으로 render() 함수가 포함되어 있습니다.


※ JavaScript 소스코드 ※


class Clock extends React.Component {

  render() {

    return (

      <h3>현재 시각은 [{this.props.date.toLocaleTimeString()}] 입니다.</h3>

    );

  }

}


function tick() {

  ReactDOM.render(

    <Clock date={new Date()}/>, 

    document.getElementById('root')

  );

}

setInterval(tick, 1000);



  이로써 Clock 클래스의 인스턴스 하나만 사용되는 형태로 구현이 완료되었습니다. 다만 여기에서 생성자(Constructor)를 이용해서 Clock 클래스 멤버 변수로서 Date 객체를 처리하도록 하면 더욱 객체 지향적일 것입니다. 바로 이 때 상태(State)가 사용됩니다.


  또한 state를 사용할 때는 반드시 생성자를 만들어 주어서 state에 대한 초기화를 진행해주셔야 합니다.


※ JavaScript 소스코드 ※


class Clock extends React.Component {

  constructor(props) {

    super(props);

    this.state = {date: new Date()};

  }

  

  render() {

    return (

      <h3>현재 시각은 [{this.state.date.toLocaleTimeString()}] 입니다.</h3>

    );

  }

}


ReactDOM.render(

  <Clock />, 

  document.getElementById('root')

);



  위 코드를 보시면 props가 state로 대체된 것을 확인할 수 있습니다. 실제로 이와 같이 특정한 값이 계속 변경되는 형태를 보일 때는 보통 state을 사용하게 됩니다. 하지만 현재 state 값이 변경되는 로직이 코드에 없습니다. state는 props와 다르게 부모 컴포넌트에서 값을 넘겨주는 형태로 사용되지 않기 때문이에요. 그래서 위 소스코드는 실행했을 때 실제로 시간이 변경되지 않습니다. 또한 추가적으로 알아두어야 할 것은 state 값을 수정하고자 할 때는 setState() 함수를 이용해야 한다는 점입니다.


  따라서 컴포넌트 라이프 사이클 함수를 이용하시면 됩니다. 이전에 props를 사용할 때는 미리 Date 객체를 생성해서 자식 컴포넌트인 Clock 컴포넌트에게 데이터를 보내주어야 했지만 state를 이용하게 되면 내부적으로 데이터를 함수에 의해서 처리하게 됩니다. 반면에 props는 컴포넌트 내부 함수를 이용해서 변경될 수 없다는 특징이 있어요. 결과적으로 우리는 state 값을 변경하기 위해서 컴포넌트 라이프 사이클을 이용하게 될 것입니다. 컴포넌트 라이프 사이클에 대한 자세한 내용은 다음 시간에 진행하게 되며, 일단 간단히 예제를 알아보도록 해요.


class Clock extends React.Component {

  constructor(props) {

    super(props);

    this.state = {date: new Date()};

  }

  

  componentDidMount() {

    this.timerID = setInterval(() => this.tick(), 1000);

  }


  componentWillUnmount() {

    clearInterval(this.timerID);

  }


  tick() {

    this.setState({

      date: new Date()

    });

  }

  

  render() {

    return (

      <h3>현재 시각은 [{this.state.date.toLocaleTimeString()}] 입니다.</h3>

    );

  }

}


ReactDOM.render(

  <Clock />, 

  document.getElementById('root')

);


  결과적으로 다시 다음과 같이 1초에 한 번씩 시간 데이터가 갱신되는 것을 확인할 수 있습니다.



  따라서 state를 사용하는 이유에 대해서 더욱 자세히 알아보기 위해 버튼 이벤트가 발생할 때마다 특정한 객체의 값이 변경되는 사례를 확인해보도록 하겠습니다. 현재 시각을 처음에 한 번 기록해 놓은 뒤에, 특정 버튼을 누를 때마다 시각이 10초씩 뒤로 밀려나도록 처리하겠습니다.


class Clock extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      date: new Date()

    }

  }

  

  goBack() {

    let nextDate = this.state.date;

    nextDate.setSeconds(nextDate.getSeconds() - 10);

    this.setState({

      date: nextDate

    });

  }

  

  render() {

    return (

      <div>

        <h3>현재 시각은 [{this.state.date.toLocaleTimeString()}] 입니다.</h3>

        <button onClick={this.goBack.bind(this)}>10초 뒤로가기</button>

      </div>

    );

  }

}


ReactDOM.render(

  <Clock />, 

  document.getElementById('root')

);



  기본적으로 우리가 사용하고 있는 ES6 문법에서는 자동으로 함수가 바인딩 처리 되지 않습니다. 그래서 직접 메소드를 바인딩 처리 해주셔야 하며 바인딩을 하지 않는 경우 리액트 객체가 정상적으로 처리되지 않습니다.


  (+ 추가)

  state의 개념을 지금 한 번에 이해할 필요는 없습니다. 추후에 프로젝트 예제를 다루면서 state를 사용하면 보다 깔끔하게 이해할 수 있을 거예요. 대략 이런 개념이 있다는 것 정도만 이해하고 넘어가세요.

728x90
반응형

'리액트(React)' 카테고리의 다른 글

React 이벤트 처리(Event Handling)  (2) 2019.01.04
React의 LifeCycle과 API 호출  (2) 2019.01.04
React의 State  (0) 2018.12.25
React의 Component와 Props  (0) 2018.12.25
React에서 JSX란?  (0) 2018.12.25
코드펜(Codepen)을 이용한 React 개발환경 구축하기  (0) 2018.12.25

Comment +0

728x90
반응형

  리액트(React)에서 컴포넌트(Component)는 자바스크립트 함수와 흡사하다고 보시면 됩니다. 또한 이러한 컴포넌트는 프롭스(Props)를 입력으로 받아서 리액트 요소(React Element)를 반환하는 형태로 동작합니다. 이러한 구조를 따르면 사용자가 보는 웹 페이지의 화면을 효과적으로 구성할 수 있습니다. 프롭스(Props)는 속성(Property)의 약자입니다. 흔히 자바(Java), 파이썬(Python) 등의 객체 지향 프로그래밍에서 사용하는 그 '속성'의 의미와 동일하다고 보시면 이해하기 쉽습니다.


  간단한 예제를 통해서 Component와 Props에 대해서 알아보도록 합시다. 또한 일단 함수형 컴포넌트를 이용할 것입니다.


※ HTML 소스코드 ※


<div id="root"></div>


※ JavaScript 소스코드 ※


function Show(props) {

  return (

    <h3>

      Name is {props.name}

    </h3>

  );

}


const element = <Show name="나동빈"/>;

ReactDOM.render(element, document.getElementById('root'));



  보시면 아까 언급했듯이 컴포넌트 형태로 사용되는 Show가 자바스크립트 함수처럼 props를 입력으로 받아서 리액트 요소를 반환하는 것을 알 수 있습니다. ReactDOM.render() 함수는 첫 번째 매개변수로 특정한 컴포넌트(Component)를 받습니다. 그래서 자신이 원하는 컴포넌트를 넣어주기만 하면 되는 것입니다. 그렇기 때문에 다음과 같은 형태로도 사용할 수 있습니다. 


ReactDOM.render(<Show name="나동빈"/>, document.getElementById('root'));


  또한 특정한 컴포넌트(Component)의 props는 디폴트(Default) 값을 설정할 수 있습니다.


※ JavaScript 소스코드 ※


function Show(props) {

  return (

    <h3>

      Name is {props.name}

    </h3>

  );

}


Show.defaultProps = {

  name: '홍길동'

};


ReactDOM.render(<Show/>, document.getElementById('root'));



  또한 기본적으로 특정한 컴포넌트가 다른 컴포넌트의 결과를 반환하도록 할 수도 있으며, 매우 다양하게 활용할 수 있습니다. 아래 예제를 보시면 실제로 컴포넌트를 두 번 거치면서 많은 내용들이 추가되는 것을 알 수 있습니다. 다시 말해서 이와 같이 리액트를 활용하면 뷰(View)를 표현할 때 보다 효과적으로 코딩할 수 있는 것입니다.


※ JavaScript 소스코드 ※


function Show(props) {

  return (

    <h3>

      Name is {props.name}

    </h3>

  );

}


function App() {

  return (

    <main>

      <Show name="나동빈"/>

      <Show name="홍길동"/>

      <Show name="이순신"/>

    </main>

  );

}


ReactDOM.render(<App/>, document.getElementById('root'));



  여기까지 이해하셨다면 이제 실제로 리액트(React)를 이용해서 뷰(View)를 그럴싸하게 만들어보는 예제를 다루어 봅시다.


※ JavaScript 소스코드 ※


function User(props) {

  return (

    <div>

      <img src={props.user.imageUrl}/>

      &nbsp;<strong>{props.user.name}</strong>

    </div>

  );

}


function Board(props) {

  return (

    <section>

      <User user={props.user}/>

      {props.title}

      <hr/>

      {props.content}

    </section>

  );

}


const board = {

  title: '게시글 제목입니다.',

  content: '게시글 내용입니다. 반갑습니다.',

  user: {

    name: '나동빈',

    imageUrl: 'https://placeimg.com/32/32/any'

  }

}

      

ReactDOM.render(

  <Board

    title={board.title}

    content={board.content}

    user={board.user}

  />,

  document.getElementById('root')

);


728x90
반응형

'리액트(React)' 카테고리의 다른 글

React의 LifeCycle과 API 호출  (2) 2019.01.04
React의 State  (0) 2018.12.25
React의 Component와 Props  (0) 2018.12.25
React에서 JSX란?  (0) 2018.12.25
코드펜(Codepen)을 이용한 React 개발환경 구축하기  (0) 2018.12.25
React JS의 개요와 Hello World  (0) 2018.12.25

Comment +0

728x90
반응형

  JSX는 자바스크립트(JavaScript) 문법의 확장판입니다. JSX는 리액트(React)에서의 요소(Element)를 제공합니다. 또한 향후 리액트의 컴포넌트(Component)에 대해서 공부하게 될 것입니다. 이러한 컴포넌트는 항상 렌더링을 수행한다는 특징이 있습니다. render() 함수로 이를 구현하게 됩니다.


  다음의 소스코드를 실행해 봅시다.


※ HTML 코드 ※


<div id="root"></div>


※ CSS 코드 ※


.blue { 

  color: blue;

}

.red {

  color: red;

}


※ JavaScript 코드 ※


function formatInfo(student) {

  return student.name + "[" + student.id + "]";

}


const student = {

  id: '20153157',

  name: 'Dongbin Na',

  color: 'blue'

};


const element = (

  <h3 class={student.color}>

    {formatInfo(student)}

  </h3>

);


ReactDOM.render(element, document.getElementById('root'));



  기본적으로 element라는 변수에는 HTML 태그가 포함되어 있고 문자열도 포함되어 있습니다. 이런 것들을 JSX라고 이해하시면 됩니다. 우리가 지난 시간에 설정했던 바벨(Babel)이 JSX 로더를 이용하여 실질적으로 JSX가 동작하게 해줍니다.


  위 소스코드를 보면 알 수 있듯이 JSX에서는 중괄호를 이용하여 자바스크립트(JavaScript) 구문을 실행할 수 있습니다. 이러한 중괄호는 속성의 값으로도 들어갈 수 있다는 점에서 사용이 편리합니다.


  또한 React DOM은 렌더링을 하기 전에 JSX에 포함된 값을 이스케이프 처리합니다. 그래서 XSS로부터 안전합니다. 또한 기본적으로 JSX는 카멜 케이스(Camel Case)를 사용한다는 점에서 기존의 자바(Java) 개발자들에게 익숙하다는 특징이 있습니다.


  리액트에서 요소(Element)를 렌더링하는 것은 매우 간단합니다. 일반적인 브라우저의 DOM 객체와는 다르게 리액트의 객체는 가볍고 강력하다는 특징이 있습니다. React DOM은 브라우저의 DOM이 리액트 요소와 매칭될 수 있도록 관리합니다.


  실제로 React DOM이 얼마나 효율적인지는 다음의 소스코드로 확인해 볼 수 있습니다.


※ HTML 코드 ※


<div id="root"></div>


※ JavaScript 코드 ※


function tick() {

  const element = (

    <h3>현재 시각은 [{new Date().toLocaleTimeString()}] 입니다.</h3>

  );

  ReactDOM.render(element, document.getElementById('root'));

}

setInterval(tick, 1000);



  실제로 크롬(Chrome) 브라우저에서 렌더링 되는 것을 확인해 보시면 시각에 해당하는 부분만 다시 렌더링 되는 것을 확인할 수 있습니다.

728x90
반응형

'리액트(React)' 카테고리의 다른 글

React의 LifeCycle과 API 호출  (2) 2019.01.04
React의 State  (0) 2018.12.25
React의 Component와 Props  (0) 2018.12.25
React에서 JSX란?  (0) 2018.12.25
코드펜(Codepen)을 이용한 React 개발환경 구축하기  (0) 2018.12.25
React JS의 개요와 Hello World  (0) 2018.12.25

Comment +0

728x90
반응형

  코드펜(Codepen)은 프론트 엔드(Front-End) 개발에 있어서 매우 유용한 사이트입니다. 굳이 우리의 로컬 컴퓨터에 개발환경을 구축하지 않아도 빠르고 효과적으로 웹 사이트 상에서 소스코드를 작성하여 테스트 해 볼 수 있습니다.


  ▶ 코드펜 사이트: https://codepen.io/



  앞으로 작성할 다양한 프로젝트를 손쉽게 관리하기 위해서 가장 먼저 '회원가입'부터 진행해주도록 합시다. [Sign Up for Free] 버튼을 누르시면 회원가입 페이지로 이동합니다.




  저는 위와 같이 제 이메일 주소로 회원가입을 진행했습니다.



  회원가입 이후에는 메인 페이지로 이동해서 바로 프로젝트를 만들어서 코딩을 시작할 수 있습니다. 저는 생성(Create) 버튼을 눌러서 프로젝트를 만들어 보도록 하겠습니다.



  프로젝트를 만드실 때에는 [Pen]으로 만드시면 됩니다.



  저는 바로 제목을 바꾸어주었고, 간단한 HTML 소스코드를 작성하여 저장(Save) 해보았습니다. 소스코드를 수정하면 알아서 화면이 새로고침 되면서 정상적으로 동작하는 것을 확인할 수 있습니다.



  이제 리액트(React) 개발환경을 구축하기 위해 설정(Settings) 탭을 열어봅시다.



  기본적으로 리액트는 자바스크립트 라이브러리이므로 JavaScript 탭을 확인하시면 됩니다.



  바로 검색창에서 [react][react-dom]을 검색하여 추가합니다.


  - React: 컴포넌트를 처리합니다.

  - React Dom: 웹 문서의 Dom에 렌더링을 진행합니다.


  추가를 해보시면 다음과 같이 성공적으로 CDN 경로를 불러옵니다.



  이어서 JSX 등의 기능을 이용하기 위해 바벨(Babel)로 설정합니다.



  일단 세팅이 완료되었다면 정상적으로 동작하는지 여부를 확인하기 위해서 Hello React예제를 만들어 보겠습니다. 다음과 같이 소스코드를 작성해주세요.


※ HTML 코드 ※


<div id="root"></div>


※ JavaScript 코드 ※


class HelloReact extends React.Component {

  render() {

    return (

      <h1>Hello React!</h1>

    );

  }

}


ReactDOM.render(<HelloReact/>, document.getElementById('root'));




  이 때 컴포넌트는 자바스크립트 클래스 중 하나입니다. React.Component라는 이름으로 준비되어 있습니다. 기본적으로 리액트를 이용한다는 것은 이러한 다양한 리액트 라이브러리를 상속 받아서 활용하는 것이라고 이해하시면 됩니다. (자바스크립트 ES6 버전부터 클래스가 도입되었으며 일반적인 객체 지향 프로그래밍과 동일하게 클래스를 사용하시면 됩니다.)

728x90
반응형

'리액트(React)' 카테고리의 다른 글

React의 LifeCycle과 API 호출  (2) 2019.01.04
React의 State  (0) 2018.12.25
React의 Component와 Props  (0) 2018.12.25
React에서 JSX란?  (0) 2018.12.25
코드펜(Codepen)을 이용한 React 개발환경 구축하기  (0) 2018.12.25
React JS의 개요와 Hello World  (0) 2018.12.25

Comment +0

728x90
반응형

  리액트(React)UI를 효과적으로 구축하기 위해 사용하는 자바스크립트(JavaScript) 기반의 라이브러리입니다. 그러므로 HTML과 자바스크립트를 할 수 있다면 리액트도 어렵지 않게 사용할 수 있습니다. 또한 리액트는 라이브러리라는 점에서 다른 라이브러리들과 함께 사용할 수 있어 효율적입니다. 무엇보다 리액트는 오픈소스 커뮤니티가 매우 방대하다는 장점이 있습니다.


  다시 말해서 리액트(React)를 배우기 전의 선행 과정은 JavaScript입니다. 또한 추가적으로 jQuery와 같은 다른 라이브러리를 사용해 본 경험이 있다면 리액트의 장점 및 필요성에 대해서 보다 쉽게 이해할 수 있을 것이라고 생각합니다.


  이 강좌는 초반부에는 리액트의 개요 및 사용 방법에 대해서 다루기 때문에 조금 지루할 수 있습니다. 다만 1시간 가량만 실습을 하더라도 기본적인 사용 방법에 대해서 알 수 있으며, 이후에는 바로 실습을 진행하며 공부하게 되므로 재미있게 학습하실 수 있습니다.


  ▶ 리액트 오픈소스: https://github.com/facebook/react



  리액트(React) 오픈소스는 별점이 10만 개가 넘는 유명한 프로젝트입니다. (그래서 리액트를 제대로 다룰 줄 모르는 저는 마치 저만 쓸 줄 모르는 것 같은 소외감을 느끼곤 했습니다.) 또한 MIT 라이센스를 따른다는 점에서 상당히 자유롭게 사용할 수 있는 편입니다.


※ 리액트의 특징 ※


  - 선언적(Declarative): 리액트는 대화형 UI를 작성하기에 유리합니다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 합니다.


  - 컴포넌트 기반(Component-Based): 캡슐화된(Encapsulated) 컴포넌트가 상태를 관리하고 UI를 효과적으로 구성할 수 있습니다.


  - 한 번 배워서 어디에서나 사용하기(Learn Once, Write Anywhere): 기존의 소스코드를 불필요하게 다시 작성하지 않고 새로운 기능을 개발할 수 있습니다.


  이러한 리액트는 공식 문서를 읽으면서 바로 공부를 시작해 볼 수 있습니다.


  ▶ 리액트 학습 사이트: https://reactjs.org/docs/getting-started.html



  또한 기본적으로 리액트는 단순히 웹 환경에서 돌릴 수 있다는 점에서 굳이 우리 로컬(Local) 컴퓨터에 개발 환경을 구축하지 않아도 충분히 온라인 상에서 소스코드를 테스트 해 볼 수 있습니다.


  ▶ 리액트 사용해보기: https://reactjs.org/redirect-to-codepen/hello-world




※ 리액트의 장점과 단점 ※


  리액트는 뛰어난 성능을 가지고 있으며 클라이언트 렌더링 뿐만 아니라 서버 사이드 렌더링도 지원합니다. 그래서 Ajax 등과 같은 비동기 방식과 비교했을 때 검색 엔진 최적화(SEO) 등에 있어서 유리한 형태로 소스코드를 작성할 수 있습니다. 이러한 검색 엔진 최적화 문제는 상당수 SPA 프로젝트가 가지는 문제입니다.


  또한 리액트는 이미 많은 웹 서비스가 채택한 기술이라는 점에서 그에 따라서 오는 부가적인 장점이 있습니다.


  ▶ 리액트를 사용한 서비스들: https://github.com/facebook/react/wiki/Sites-Using-React


  확인을 해보시면 페이스북(Facebook), 인스타그램(Instagram) 등 유명한 서비스가 포함되어 있습니다.


  (+ 추가)


  또한, 리액트를 시작하기 전에 자바(Java), C++ 등을 해 본 사람을 위해서 이것이 무슨 라이브러리인지 쉽게 설명해드리겠습니다. 기존에 웹 사이트를 만들 때에는 보통 프론트 엔드 부분을 객체 지향적으로 작성하지는 않았어요. 백 엔드에서나 객체 지향 기법을 적절히 따르면서 개발했죠. 하지만 리액트는 프론트 엔드 또한 매우 객체 지향적으로 작성하도록 해주는 라이브러리라고 보시면 됩니다.


  그리고 기존에 JavaScript 및 jQuery까지 사용해보신 분들이라면 리액트(React) 과정은 하루에서 이틀 정도 잡으시고 빠르게 끝내시는 것을 추천드립니다. 어렵게 생각하지 마시고 단순한 라이브러리 따위 하루만에 정복하겠다는 거만한(?) 마인드로 공부하시면 좋아요.

728x90
반응형

'리액트(React)' 카테고리의 다른 글

React의 LifeCycle과 API 호출  (2) 2019.01.04
React의 State  (0) 2018.12.25
React의 Component와 Props  (0) 2018.12.25
React에서 JSX란?  (0) 2018.12.25
코드펜(Codepen)을 이용한 React 개발환경 구축하기  (0) 2018.12.25
React JS의 개요와 Hello World  (0) 2018.12.25

Comment +0