Front_End/React

React로 준비? 좀 하고 개발하기 - 1 : React Hooks

React로 준비? 좀 하고 개발하기 - 1 React Hooks Hooks are functions that let you “hook into” React state and lifecycle features from function components 공식문서에 의한 hooks에 대한 정의입니다. *함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수로 번역된다. 생명주기함수와 hooks를 둘다 써본 지금에서야 저 정의에서 와닿는 부분은, hooks로 생명주기 함수들을 재정의을 해뒀는데, 정의를 못하는 것도 있고, 어떤건 좀 더 디테일하게 세부적으로 해둘 수 있는 것도 존재한다는 정도이다. 사실 처음 hooks를..

React로 준비? 좀 하고 개발하기 - 0 : React Lifecycle

React로 준비? 좀 하고 개발하기 - 0 React Lifecycle 일전에 회사에서 React로 일단 머리를 박으면서 개발을 해봤는데 생각보다 고려해야할 부분이 많다고 느꼈습니다. 주로 작업하던 영역이 core단은 vanilla js, view단은 jquery로 작업하다보니 최신? 프레임워크/라이브러리에 익숙해지는데 제법 많은 시간이 걸린것 같습니다. 확실히 js는 라이브러리/프레임워크를 도입했을 때 장점이 많은 것 같지만 제어의 역전에 대해서는 아무래도 조금 거부감이 드는것도 사실입니다. 서론은 여기까지하고, 오늘은 React로 개발을 하면서 먼저 알아두면 좋을 것에 대해 기술해보려 합니다. LifeCycle React에서의 lifeCycle은 크게 3개 Mounting / Updating / `..

React로 무작정 개발하기 - 2

React로 무작정 개발하기 - 2 리스트 렌더링 import React, { Component } from 'react'; class Test extends Component { static defaultProps = { test: 'test' } listRenderingTest() { let arr = [0,1,2,3,4,5,6,7,8,9] let listTemplate = arr.map((item) => ( { item } )) return ( { listTemplate } ) } render() { return ( { this.listRenderingTest() }; ); } } export default Test;코드를 먼저 보여주는게 훨씬 이해하기가 빠를 것 같습니..

React로 무작정 개발하기 - 1

React로 무작정 개발하기 - 1 컴포넌트 생성 개발을 하기에 앞서서, React도 Vue와 마찬가지로 UI를 컴포넌트 단위로 나눠서 개발을 한다. 그러므로 컴포넌트를 만드는 것부터 알아보자(매우 쉬움) 먼저, src 폴더에 Components라는 폴더를 만들고, HelloWorld.js 라는 파일을 만들자. import React, { Component } from 'react'; class HelloWorld extends Component { render() { return ( Hello World! ); } } export default HelloWorld;매우 심플하다. render() 함수의 몸체가 구현체가 된다. 여기서 주의해야할 점은, return()안에는 반드시 하나의 t..

React로 무작정 개발하기 - 0 (준비)

React 시작하기 React를 어떻게 쓰기에 앞서 react가 무엇인지. vue에 비해 뭐가 좋고 뭐가 나쁜지 알아보도록 하자(작성자는 react보다는 vue를 선호한다. template 방식이 너무 쉽고 편하다고 생각) React란 무엇인가? React repo를 들어가보면 React is a JavaScript library for building user interfaces. 이와 같이 시작한다. 유저 인터페이스(UI)를 위한 JS 라이브러리 임을 알 수 있다. 개인적으로는 js에서 html을 매핑해서 html처럼 렌더링 될 수 있게끔 하는 것으로 보인다. Vue.js와 마찬가지로, react 역시 webpack과 같이 사용할 경우 프레임워크 처럼 구조를 잡고 개발을 할 수있는걸로 보인다. (갓 ..