웹찢남

학기도 끝났고 bob도 깔끔하게 면접에서 찢겼다... 리액트 공부를 빨리 마치고 방학동안은 백앤드를 집중적으로 공부해서 이번 방학이 지나면 웹찢남이 되기를 바라며... 스타일 컴포넌트란 css나 sass 같은 스타일 파일을 따로 작성하지않고 컴포넌트 안에서 스타일을 정의하여 바로 사용하는 방법이다. css 방식의 경우 컴포넌트를 공유할때 스타일 파일도 공유해야하고 관리도 번거롭다. 리액트를 배운다는 건 어느정도 css에 지식이 있다는 것을 전제로 한번 살펴보면 const Title=() => 취킨좋아~! const Page=()=>( 난 뿌링클이 좋아 ); 위와 같은 함수형 컴포넌트에 아래와 같은 css파일을 작성하면?? .title { font-size: 16px; color: black; } h1태그..

CSS 또는 scss 이용하여 머티리얼 디자인 적용하기 1. CDN방식으로 머티리얼 디자인 적용하기 머티리얼 디자인: 구글에서 공개한 디자인 가이드 CDN은 특정 파일을 전세계에 분산,복사하여 가장 근접한 곳에서 빠르게 내려받을 수 있도록 파일을 제공하는 방법이다. 리액트 서버에 파일을 추가하지 않고 직접 이용할 경우 이 방법을 이용한다. public내의 index.html 에 아래의 코드를 추가하면 된다. 2.App 컴포넌트에 머티리얼 디자인 적용하기 harry595의 티스토리 REACT !!! 위와 같이 코드를 삽입하면 아래와 같은 결과를 얻을 수 있다. 3. 파일 방식으로 머티리얼 디자인 적용하기 https://materializecss.com/ Documentation - Materialize m..

비주얼 테스트란 화면을 구성하는 컴포넌트들을 독립적으로 관리하고 변화를 살펴볼 수 있는 방법을 의미한다. 스토리북 설치하고 사용해 보기 1.스토리북 설치하기 yarn add --dev @storybook/react 2.package.json에 스토리북 실행 명령어 추가하기 "scripts"중괄호에 아래와 같은 line입력 "storybook": "start-storybook -p 9001 -c .storybook", -> storybook 명령어가 스토리북 서버를 9001 포트를 통해 실행 3.스토리 파일 만들기 스토리는 컴포넌트의 여러 출력 형태를 구성한 페이지다. 스토리 파일은 아래와 같이 만들 수 있다. import React, { Component } from "react"; import { st..

Component 클래스는 프로퍼티,state와 생명주기 함수가 들어있는 컴포넌트를 만들 때 사용 PureComponent 클래스는 Component 클래스를 상속받은 클래스다. PureComponent로 선언한 컴포넌트는 shouldComponentUpdate() 함수에서 shallowEqual() 함수로 얕은 비교를 하여 데이터의 변경이 있으면 화면을 새로 출력하고 Component클래스로 선언한 컴포넌트는 항상 새로 출력한다. *shallwEqual는 얕은 비교로 같은 요소를 가지면 같다고 본다. *"==="이나 "=="은 요소가 같아도 새롭게 정의된 배열이면 false로 취급한다. -----------------------------------------------------------------..

프로퍼티의 경우 컴포넌트 내부에서 값을 바꿀 수 없다. 하지만 값을 바꿔야하는 경우가 있다. 그 경우 state를 사용한다. state는 보통 버튼을 클릭하거나 입력하는 등의 이벤트와 함께 사용된다. constructor(props){ super(props); this.state={ =>state의 초기값을 객체형태로 정의 loading:true, formData: 'no data', }; this.handleData=this.handleData.bind(this); => 함수로 보냄 setTimeout(this.handleData,4000); => 4초후 함수 호출 } handleData() { const data='new data'; const {formData}=this.state; this.set..

JSX는 JavaScriptXML의 줄임말로 자바스크립트 XML을 추가한 문법이다 JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어 편리하다. src폴더의 App.js를 보면 return() 함수 내에 HTML을 사용하며 HTML이 아니라 XML 마크업 규칙을 따르므로 img 엘리먼트 끝에 />를 사용하는 등 차이가 있다. ---------------------------------------------------- 컴포넌트와 구성요소 컴포넌트는 리액트의 꽃이라 불릴 정도로 리액트에서 가장 중요한 요소다. 리액트로 작성된 화면은 컴포넌트만으로 구성되어 있다. 기존의 웹 프레임워크는 MVC방식으로 정보 화면 구동코드를 분리하여 관리했다. 하지만 컴포넌트는 MVC의 뷰를 독립적으로 구성..