IT_susu

블로그 이전 https://velog.io/@susu1991/%EC%9D%B4%EC%A0%84%EC%9E%90%EB%A3%8C%EB%B0%B1%EC%97%85-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4

1. {name} 준비중 2. {name} { isPrepare && 준비중 }

import React, { Component } from 'react';import logo from './logo.svg';import './App.css'; class App extends Component { render() { return ( Edit src/App.js and save to reload. Learn React ); }} export default App; 1) import 구문import는 es6에서 정의한 모듈을 불러오는 방법입니다.그러나 이는 node.js 환경에서 사용되는 것이지, 브라우저 환경에서는 이 기능이 지원되지 않으므로 번들링을 사용해야 합니다.번들링은 모듈을 하나의 파일로 합쳐서 html파일에 script로 넣어줍니다. 2) class App extends Co..

렌더링과 데이터의 변화에 있어 기존 개발방식과 리액트를 포함한 모던프론트엔드개발방식이 다릅니다.기존 방식은 데이터에 변화가 있으면 해당 DOM을 선택하고 데이터를 가공한 뒤, 해당 DOM에 데이터를 입혔습니다.이 과정에서 DOM을 쉽게 선택할 수 있는 jQuery가 편리한 사용성으로 많은 사랑을 받았죠. 그러나 데이터 교체가 잦거나 큰 프로젝트의 경우 해당 dom을 선택하는 규칙도 까다로워지고 dom도 데이터의 변환이 너무 자주 일어나므로 성능이 떨어졌습니다.Dom은 빠른 성능을 갖고 있지만 정적 UI에 최적화되어 있어 동적인 UI에는 취약합니다. 이에 리액트에서는 데이터 변화가 있을 때 기존 뷰를 날리고 새로 렌더링 하는 생각의 전환을 하게 되었습니다. 새로 렌더링을 한다는 것은 기존 Dom으로서는 무..

props는 부모 자식 관계에서 데이터를 주고 받는 것이지만, state는 하나의 컴포넌트 내부에서 데이터 값이 변하는 것입니다. state의 값을 변경할 때는 항상 setstate라는 함수를 사용하여 변경합니다. 왜냐하면 setstate함수가 호출되면 컴포넌트가 리렌더링되도록 설계되어 있기 때문입니다. setstate를 거치지 않고 값을 직접 변경해도 리렌더가 되지 않으면 소용없겠죠? 뷰에 업데이트가 되지 않을테니까요. import React, { Component } from 'react'; export default class Counter extends Component{ state = { number: 0 -------------------------- 1 } handleIncrease = ()..

리액트를 사용할 때 알아두어야 할 기초 개념들에 대해서 간단하게 짚어보자. 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..

리액트에서 html을 표현하기 위한 JSX를 작성할 때 주의 점을 살펴봅시다. html과 매우 유사하지만 조금은 다른, jsx입니다. 1. 모든 돔 태그는 항상 닫혀있어야 한다. html 태그 중에는 input, br과 같이 닫히는 태그가 없는 태그들도 있지만, jsx에서 에러가 난다. xml 방식이기 때문이다. 셀프 클로징이라도 해야한다. ex) 회원가입 회원가입 둘러보기 2. 하나의 컴포넌트의 최상단에는 모든 태그를 감싸고 있는 하나의 엘리먼트만 있어야 한다. 하나의 엘리먼트가 DOM 트리 구조를 가진 하나의 객체로 변환되어 이전버전과 지금 버전의 차이점을 알 수 있게 해준다. 만일 이렇게 감싸는 것이 의미없는 태그를 하나 더 쓰는 것 같아 싫다면 혹은 로 감싸도 됩니다. 단, v16.2이상에만 사용..