프론트엔드 (17) 썸네일형 리스트형 [ React ] [Chapter 9] 단일 웹 SPA 단일 웹 애플리케이션 SPA SPA(Single Page Application)은 한 개의 페이지로 이루어진 어플리케이션이다. 전통 적인 웹 페이지랑 다른 구성이다. 전통적인 웹 기존에 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고 페이지를 로딩할 때 마다 서버에 리소스를 전달 받아 해석 한 뒤에 화면에 보여주었다. 그런데 요즘 웹은 제공되는 정보가 많기 때문에 새로운 화면을 보여 주어야 할 때마다 서버측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있다. 그래서 React는 View랜더링을 사용자 브라우져가 담당하고, 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 해준다. 바뀐 웹 SPA 단일 페이지 SPA 주의점 1.자바스크립트에서 브라우저로 페.. [ 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는 코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러개로 결과파일을 만든다 즉 전체적으로 파일들을 관리해주는 도구라고 생각하면 된다. 어떠한 코.. 이전 1 2 3 다음
