IT_susu

리액트를 사용할 때 알아두어야 할 기초 개념들에 대해서 간단하게 짚어보자. 1. ES62015년에 업데이트 된 자바스크립트 공식문서다. 자바스크립트의 영역이 확장되면서 많은 보완과 업데이트가 이루어졌다. 모던 자바스크립트이기에 아직 플랫폼들이 최신버전을 다 반영하지 못했으므로 es6를 사용하려면 보완책이 필요하다. 2. babel브라우저 등 플랫폼들이 최신 자바스크립트를 반영하지 못하는 문제는 해결하기 위해 나온 자바스크립트 변환 도구이다.우리가 최시버전으로 작성해도 babel을 적용하면 이전 버전으로 다운그레이드시켜준다. 3. webpack모듈 번들러. 프로젝트의 다양한 파일들을 하나로 모아주고 프로젝트의 빌드 작업을 도와준다. 4. redux리액트에서 어플리케이션의 상태를 관리하려면 redux를 사용..

정의 리액트 컴포넌트에서 데이터를 다루는 방법은 2가지가 있다. 1. props ( 값을 안주면 default value : true ) 2. state props는 부모 컴포넌트(import받는 컴포넌트)에서 자식 컴포넌트(export하는 컴포넌트)로 데이터를 넘겨주는 용도로 사용한다. 자식 컴포넌트에서 수정은 불가능하고 부모 컴포넌트에게서 받을 수만 있는 값이다. (가능해도 하지 마세요. 코드 엄청 복잡해집니다.) state는 컴포넌트 내부에서 선언하여 내부적으로만 값을 변경할 용도로 사용한다. props 구현 // App.js import React, { Component } from 'react'; import MyName from './MyName'; class App extends Compon..

react에서 jsx사용이 필수는 아니지만 시각적으로 더 도움이 되고 react에서 보내주는 에러 및 경고 메시지 서비스를 받을 수 있어 많이 사용합니다. jsx는 JavaScript에 XML을 합쳐 구문을 확장한 표현식입니다. 컴파일 후 JSX 표현식은 일반 javascript함수 호출이 되고 javascript객체로 평가됩니다. 식은 값이 될 수 있기 때문에 if명령문과 for 루프 안에서 사용할 수 있고, 변수에 할당하고 함수의 인수로 받거나 반환할 수 있습니다. * 인젝션 공격 예방 react Dom은 렌더링 되기 전에 jsx내에 포함된 모든 값을 문자열로 바꾸기 때문에 XSS(cross-site-scripting)공격을 막을 수 있습니다. * innerHTML을 대체하는 dangerouslySe..