전체 글 (33) 썸네일형 리스트형 [ React ] [Chapter 8] useState useState useState는 컴포넌트에서 보여줘야 하는 데이터가 사용자 인터랙션에 따라 바뀌어야 할 때 많이 사용 된다. useState 알기 전에 알아야할 Hooks Hooks 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서 상태를 관리하거나 상태를 관리 했었다. 16.8버전 이후로는 Hooks 라는 기능이 도입 되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. Hook는 class를 작성하지 않고도 state와 다른 리액트의 기능들을 사용할 수 있게 해준다. Hook는 생명주기와 이벤트 핸들러와 state를 연동 시켜주는 도구이다. 이 Hooks 에서 제공하는 useState라는 함수를 사용 할거다. 코드 작성 예시 많은 예시이고 좋은 예시인 카운터를 하는 예시로 설명을 하겠습니다.. [ React ] [Chapter 7] LifeCycle 사용하기 LifeCycle API - Constructor Constructor는 컴포넌트 초기 생성 컴포넌트가 첨 만들어 질 때 호출 되는 함수 import React, { Component } from 'react'; class App extends Component { constructor(props) { super(props); console.log('itjava') } render() { return ( ItJava ); } } export default App; LifeCycle API - componentDidMount componentDidMount 는 컴포넌트가 화면에 나타날 때 호출 된다. componentDidMount() { console.log('itjava2') } LifeCycle AP.. [ React ] [Chapter 6] LifeCycle API 란? LifeCycle API 란 무엇인가 리액트에서 컴포넌트를 만들 때 가장가장 중요한 이 LifeCycle API를 배워볼거다 LifeCycle API 는? 단어만 보면 생명주기 라는걸 알 수 있다. 컴포넌트가 우리 브라우져에서 나타날 때, 업데이트 될 때, 사라질 때 이러한 중간 과정에서 우리가 어떤어떤 작업을 하고 싶다 그럴 때 사용하는 것이 LifeCycle API이다 LifeCycle API는 종류가 엄청 많다 보면 엄청 많죠? 저 하나하나가 다 함수입니다. 꼭 다 외울려 하지말고 아 이런게 있구 하고 넘어가고 나중에 필요할 때 찾아보면 됩니다. 당연 다 외우면 좋기야 하죠 일단 설명을 하자면 Mounting 은 컴포넌트가 우리 브라우져상에 나타난다는 것 ->1. constructor : 생성자 함.. [ React ] [Chapter 5] State State 이번엔 State를 알아보겠습니다 이것도 리액트의 아주 중요합니다.State는 컴포넌트 자기 자신이 들고 있는데, 만약에 변화가 필요하다 그러면 컴포넌트 내장 함수인 setState() 함수를 이용해 설정해 줍니다. props 같은 경우는 부모가 자식한테 값은 전달해주는 즉 자식은 데이터 읽기만 가능했다면 State는 조금 다른 개념인 자기가 가지고 있고 읽기도 하고 쓰기도 하는것 즉 props 는 Reader 와 Writer이 나뉘어져 있다면 State는 하나로 뭉쳐진것이죠 State 사용해보기 새로운 컴포넌트를 만들자 글자는 ItJava.js로 만들었다.어떠한 이벤트로 카운터를 늘리고 줄이는 걸 만들어 보자 이전에 설명 했듯이 state는 자기 자신이 변화를 가지고 있고 해당 데이터를 읽고.. [ React ] [Chapter 4] Props Props 리액트에서 정말 중요한 개념이다 꼭 짚고 넘어가자 리액트에서 데이터를 다룰 때 사용되는 개념이다. Props는 부모 컨포넌트가 자식 컨포넌트한테 값을 전달 할 때 사용될 때 사용 된다. 즉 부모가 자식한테 넘겨주는 값 단위를 props라고 한다 Props 사용하기 이전 챕터에서 말 했듯이 프로젝트를 설정 했다면 그것을 아님 글자 처럼 codesandbox 사용한다면 codesandbox를 codesandbox 사용 하고 싶으면 전 챕터를 참고해주세요 해당 처럼 하나의 Js를 생성하자 import React, { Component } from 'react'; class MyItJava extends Component { render() { return( Itjava입니다 블로그 주소는뭐뭐 입니다.. [ React ] [Chapter 3] JSX 문법 JSX 조건 JSX는 html 문자 같지만 자바스크립트로 변환이 된다. 이것은 리액트 컴포넌트를 작성 하는데 사용되는 문법이다. html이랑 비슷하지만 지켜야 할 규칙이 몇가지 존재한다. 1. 태그는 꼭 닫혀야 한다. - 로 태그를 열었으면 로 닫아줘야한다 html같은 경우 안닫을때도 있는데 JSX문법에는 꼭 닫아줘야한다. 예를 들어 html에는 input 태그를 안닫아주는 경우가 다수 존재한다 하지만 리액트에서는 이러한 태그도 꼭 을 통해서 닫아줘야한다. 2. 엘리먼트는 감싸져 있어야한다. - 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다. 예를 들어 itjava 로 할 경우 오류가 발생한다 이것을 itjava으로 두개 이상의 엘리먼트를 하나의 엘리먼트로 감싸줘야한다. 이거에 대해서.. [ React ] [Chapter 2] Webpack와 Babel 설명 및 설치환경(Window,macOs,Linux) Webpack와 Babel Webpack와 Babel 을 알기 전에 하나 알고 넘어가자 React 프로젝트를 생성할려면 환경구축이 오래걸리고 할것들이 엄청 많다. 배울거지만 Webpack와 Babel, HMR, jest, eslint, polyfill, CSS 등등 엄청 많다. 이 많은것들을 다 손수 환경 구축 해줘야 한다. 그래서 개발환경을 직접 구축하려면 많은 지삭과 노력이 필요하다. 이 강의 리뷰는 create-react-app 으로 강의를 시작 할 거기 때문에 해당 개발 환경 직접 구축은 따로 글을 올리겠다. 일단 여기서는 개념만 알아두자 Webpack는 코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러개로 결과파일을 만든다 즉 전체적으로 파일들을 관리해주는 도구라고 생각하면 된다. 어떠한 코.. [ React ] [Chapter 1] React 란 React의 탄생 배경 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 리액트를 만들었다. 2006년 John Resig가 Jquery를 발표한 이후, 순신간에 웹을 사로잡았다. Jquery가 Dom을 다루는 방식은 지금까지도 가장 효율적인 방식으로 인정받고 있고, 오랜 세월동안 사실상의 표준이기도 하다. 그러다가 Backbone와 AngulerJS를 위시한 SPA(Single Page Application)이 보다 구조화된 프론트엔드 환경을 제시하기 시작했다. 그런데도 Jquery는 많이들 사용 했다 이들 또 한 Jquery를 사용하기도 했기 때문 이 때 등장한게 React이다 React는 페이스북에서 만든 Javascript 라이브러리 이다. React의 Virtual Dom 대부분의 .. 이전 1 2 3 4 5 다음
