Browse Tag: reactJS

[ReactJS] setState에 대하여

튜토리얼을 보면,

이 부분이 잘 이해가 안가더라. Game 객체 내의 moves라는 React element에 onclick 이벤트로 등록된 것이 jumpTo 함수인데, jumpTo 함수가 실행되고 나면, 화면이 다시 그려지는데 그 re-rendering 시점을 못찾았었다. onRender 같은 이벤트가 존재하는것도 아니고 어떤 기준에서 다시 그려지는 건지 하고 검색 해봤더니

ReactJS는 상태가 변경(setState 함수 호출)시에 render 메소드를 다시 호출해서 re-rendering 을 진행한다.

결국 setState 는 사용자 이벤트에 따라 UI가 변경(show/hide 같은)되거나 Ajax 호출을 통해 데이터를 불러와서 다시 display 해줘야하는 등의 조건에서 사용해주면 좋을것 같다.

 

[ReactJS] ReactJS 튜토리얼 따라하기

이 글은 https://facebook.github.io/react/tutorial/tutorial.html 의 튜토리얼을 따라해본 것이다.

환경 설정을 마쳤다면(환경 설정이 안되어 있다면 이글을 확인), https://codepen.io/ericnakagawa/pen/vXpjwZ?editors=0010 에서 starter code를 받아보자.

  1. components 밑에 app.jsx 파일을 만들어 Square , Board , Game class를 생성하여 export 한뒤 entry.jsx 에서 해당 모듈들을 구현한다.
  2. src/css 폴더 밑에 style.css를 만들어 starter code에 있는 css를 그냥 복붙하자.
  3. index.html 에 html  코드들도 복붙해서 튜토리얼을 따라할 기본적인 코드를 구성한다.
  4. webpack 으로 빌드해서 브라우져에서 확인해보자

환경 설정과 starter code가 브라우져에서 실행 되었다면 튜토리얼을 따라가는데 큰 문제가 없을 것이다.

튜토리얼에 나오는 몇가지 중요한 점만 확인해보자

  • Immutability
    그 중간에 객체의 값을 변경하는데 slice() 를 사용하여 복제한다음 값을 변경하고 다시 state에 할당하는 작업이 있다. 이 부분에 대해 튜토리얼에서 꽤나 중요하게 언급(bold 처리된 텍스트)하는데,왜 복사해서 값을 변경하고 다시 할당 하는 작업(Immutability 라고 부른다)가 중요하냐면, ReactJS는 변경된 데이터에 대해 re-rendering 작업을 하는데 값을 변경하는 작업을 immutability하게 진행 되었다면 변경여부를 판단하는게 간단하고 쉽지만(주소값만 체크) mutated 객체의 경우 변경 여부 확인을 위해 내부 모든 값을 확인해야하고 값 변경 작업이 복잡했을 경우 re-rendering 을 위한 값 변경 여부 체크 프로세스가 기하급수적으로 복잡해지기 때문이다. 따라서 ReactJS에서는 특히 Immutability가 중요하다.
  • Functional Components
    이 함수는 stateless functional components 라고 불리는데  render() 함수만 가지는 컴포넌트이다 Functional Components 의 경우작성하기가 쉽고 향후에 ReactJS가 해당 컴포넌트에 대해 최적화를 진행하기 때문에 목적에 따라 해당 컴포넌트를 정의하는것이 중요할 것 같다.
  • Key
    ReactJS에서 리스트 컴포넌트를 렌더링 할 때 중요한 포인트가 Key 이다. 리스트 아이템이 업데이트(추가,삭제,수정)가 될 때 React는 그 중 어떤 객체가 변경 되어서 re-rendering 해야하는지 파악해야한다. 그때 사용되는것이 Key 이다. 리스트 객체에 Key를 할당하는것은 strongly recommended 하다. (Global unique 일 필요는 없고 그 리스트 내에서만 unique 해도 문제 없다.)

AngularJS의 문제점으로 느린 속도가 많이 지적되었던 것으로 아는데 이런 몇가지 요소들을 지켜 준다면 속도 이슈 없이 View를 구성 할 수 있을것으로 생각된다.

튜토리얼 자체는 어렵지 않지만 ReactJS를 처음 시작하기 위해서는 ReactJS와 함께 작동하는 에코시스템들(파이프라인)에 대해 이해하고 사용할 줄 알아야 한다는 점이 꽤나 피곤한것 같다.(러닝커브가 ReactJS에서만 발생하는 것이 아니라 webpack이나 Babel , 사실상 webpack에서 발생).

튜토리얼 자체는 step by step 으로 꽤나 친절하게 그리고 추가 문제까지 제공해주는데 따라가기 쉽다. Square에서만 이벤트가 시작되는 초기 단계에서 Square에서 발생된 이벤트가 Game 객체의 state를 변경시키는 것까지로 마무리 된다. 소스코드를 다시 보고 추가 문제를 풀어봐야겠다.

ReactJS에서 또다른 특징이 Server-side Rendering 으로 알고 있는데, 튜토리얼 후에 그 부분과 Ajax처리.. Fetch 인지 Request인지 그 부분도 공부해야할 필요가 있을것 같다.

튜토리얼을 따라가며 만들었던 소스는 github에 올려두자

https://github.com/sok891111/reactJStutorial

[ReactJS] ReactJS 튜토리얼 따라하기 – 개발 환경 구성

이번 글은 https://facebook.github.io/react/tutorial/tutorial.html 의 튜토리얼을 따라해본 것이다.

Javascript 로 Jquery를 주로 사용했던 개인 경험에 비춰보면 이건 신세계다.

마치 backend에서 빌드 파이프라인을 구축하듯이 front-end 또한 파이프라인을 구축한다. (튜토리얼에 따르면 파이프라인 없이도 ReactJS를 사용 가능하다.)

“A modern build pipeline” 은 3가지로 구성되어 있다.

  1. package manager : npm , yam 같은 페키지 매니저 들인데, 이들은 에코시스템의 third-party 패키지들을 쉽게 설치/업데이트 가능하도록 도와준다.
  2. bundler : webpack, browserify 등이 있는데 Javascript의 모듈화를 도와주는 도구들이다. 모듈들을 작성하여 webpack으로 컴파일 하면 bundle.js 를 생성할 수 있는데 이를 통해 브라우져에서 실행 할수 있게 되는 구조이다. 자세한 내용은 http://d2.naver.com/helloworld/0239818
  3. compiler:  Babel 등이 있는데 ES6 같은 모던 javascript 문법들로 작성된 javascript 파일을 브라우져가 인식 할 수 있는 파일로 만들어 주는 도구들이다.

http://www.looah.com/article/view/2054 (사랑해요 javascript)

위의 3가지를 갖춘 후 ReactJS를 설치하고 사용해보자

npm 설치 후 webpack은 여기서 , Babel은 여기서. npm만 설치 된다면 다른 도구들 설치는 어렵지 않음(npm은 세계에서 가장 많은 모듈을 가진 저장소)

webpack을 베이스로 babel 모듈을 설치해서 개발 환경을 구성하였다.

webpack 에서 babel을 이용해서 빌드 할 경우 아래 두가지는 npm으로 설치

npm install –save-dev babel-preset-es2015
npm install –save-dev babel-preset-react

프로젝트 파일 구조는 일단 이렇게 가보자 ( 참고 : https://velopert.com/814 )

 

.

├── package.json        
├── dist            # 서버 운영 파일
│   └── index.html    # 메인 페이지
├── src               # React.js 프로젝트 루트
│   ├── components    # 컴포넌트 폴더
│   │   └── App.js    # App 컴포넌트
│   └── entry.js      # Webpack Entry point
└── webpack.config.js # Webpack 설정파일
이렇게 환경이 구성되면이제 드디어 ReactJS 튜토리얼을 따라해볼 수 있다.
개발 환경 구성이 길어지면서 튜토리얼 내용은 다음 글에서 정리하겠다.
p.s ReactJS는의 클래스는 첫글자가 대문자인 캐멀 네이밍 룰을 따른다는것을 기억하자
실제 튜토리얼은 여기서