2021/02 54

React 이벤트 설치 (소스코드 해체하기, state형식으로 수정 후 이벤트처리, debugger, preventDefualt)

우선 Subject라는 컴포넌트를 풀어해치고 그 내용을 App에 도입시켜서 이벤트를 구현해보도록 하겠습니다. 1. 소스코드 해체하기 다음과 같이 props 형태로 잘 정리된 Subject 컴포넌트를 주석 처리를 하고, 그 밑에 Subject.js파일에 있는 소스코드를 그대로 들고와서 복사 붙혀넣기 했습니다. 2. state형식으로 수정 후 이벤트 처리해주기 이때 props형태인 소스코드를 state형식으로 바꿔줍니다. header라는 태그로 이벤트 처리를 다 하고, 다시 Subject 컴포넌트로 패키징을 해주는작업을 해줄겁니다. 이렇게 저장하고 실행을 하면 경고창이 잘 나옵니다. 하지만, 경고창에 확인을 누르면 화면이 다시 reload가 되는데, react는 reload시키지 않고도 역동적인 사이트를 만..

React/이벤트 2021.02.08

이벤트 state props 그리고 render 함수

이번에는 어플리케이션을 역동적으로 만들 수 있는 이벤트를 살펴볼 겁니다. props + state + event가 3박자가 착착 맞으면서 어플리케이션의 역동성을 만들어 줍니다. 마구잡이로 이벤트를 걸어주면 소스코드가 복잡해지기 때문에, state에서 먼저 틀을 잡아줍니다. 여기서 중요하게 생각해야하는것은, state의 값이 변하면 그 state를 가지고 있는 컴포넌트의 render함수가 다시 호출이 됩니다. 그 render함수가 다시 호출됨에 따라서 그 render함수에 하위에 있는 컴포넌트들도 전부 다 호출이 됩니다. 그러면 화면이 전부 다 다시 그려지게 되는겁니다. 왜냐하면 render라는 함수는 어떤 html을 그릴것인가 결정하기 때문입니다. 즉, props나 state가 변하면 화면이 다시 그려지..

React/이벤트 2021.02.05

key (컴포넌트 내부 값이 많은것을 다룰때) feat. 배열을 이용

App클래스에 constructor의 값으로 render()내의 값을 주입시켜주면서 자동으로 데이터를 바꾸게 만들겠습니다. 굳이 TOC.js파일에 들어가지 않고도 데이터값이 변하게 만들어 줄겁니다. 1. 배열형태로 만들어주고, key값과 value값으로 만들어줍니다. contents라는 property를 state에 추가했습니다. 데이터가 여러개 이기 때문에 배열형태로 만들어 줬습니다. 그리고 그 안에 값을 key값과 value 값으로 만들었습니다. state값을 받기 위해서 this.state.contents로 주입시켜주었습니다. 2. TOC.js 파일로 이동합니다. 우선 내부적으로 살펴봅니다. TOC의 어떤값을 받고 있는지부터 파악합니다. App.js에서 선언한 내용을 보고 TOC.js에서는 this..

React/state 2021.02.05

state 사용 (state값 초기화, props값 설정 )

한번쯤은 render라는 함수 밑에 선언되어있는 props의 값이 맘에 안들때가 있을겁니다. 이 props의 값을 state로 만들고 그 state값을 subejct의 props로 전달하도록 만들겠습니다. 1. state값을 초기화 하는 과정입니다. 다음과 같이 선언하면. render함수보다 먼저 실행이 되면서 그 컴포넌트를 초기화 해주고싶은 코드를 constructor 안에 작성합니다. 2. state 초기값 설정 후 props값 설정합니다. 그래서 this.state로 초기값을 설정한후에, 그 설정된 값을 render함수 안에 있는 Subject 컴포넌트에 대입시킵니다. 그럼 index.js파일로 가볼까요? App이라고 선언된것만 봤을때는 state를 사용했다는것을 알 수 있을까요? 아닙니다. 전혀 ..

React/state 2021.02.05

Components 파일로 분리하기

우선 이러한 클래스들이 만약 하나의 js파일에 천개 만개 이상이 들어간다고 상상해봅시다. 매우 복잡해 질 것입니다. 그래서 할 작업은, 각각의 컴포넌트들을 분해해서 작성해 보는겁니다. 1. SRC폴더 안에 components 폴더를 만드는 것입니다. TOC.js파일을 만들고 기존에 App.js파일 안에있는 TOC 소스코드를 긁어옵니다. 그런데 문제가 발생할겁니다. 다음의 문제인데요, 컴파일이 되지않는겁니다. 이것을 해결하기위해서는 import해야할 것이 있습니다. 이뜻은 Componenet라는것을 로딩하는 코드가 없다는 뜻입니다. 2. 파일안에 import해줍니다. 그럼 이뜻은 react라는 라이브러리에서 Component라는 클래스를 로딩한것입니다. Component 단어 앞에 React라는 단어는 꼭..

React/컴포넌트 2021.02.04

React props에 대해

다음과 같이 Subject를 두번입력하면 그냥 똑같은것이 두번출력됩니다. 이부분에 대해서 react는 아쉽게 생각하게 됩니다. 이것을 해결하기위해서 props를 이용하게 됩니다. 하단 링크에서 참고하세요! ko.reactjs.org/docs/components-and-props.html Components and Props – React A JavaScript library for building user interfaces ko.reactjs.org 확인해보면 props사용방법을 알 수 있게 됩니다. 이제는 이 개념을 본인이 만든 소스코드에 접목 시켜보겠습니다. 이부분을 바꿔보도록 하겠습니다. Subject 클래스와 App클래스의 변경사항을 쉽게 비교하기 위해서 잠시 Subject클래스를 밑에 내렸습니..

React/컴포넌트 2021.02.04

React 컴포넌트(Component) 만드는 방법 -> JSX 방식

우선 왼쪽부분에 html코드가 완성된 코드라고 봅니다. 그리고 header태그 영역을 컴포넌트로 만들고자 합니다. 그럼 클래스를 선언해야하는데, 클래스의 이름을 Subject라고 하고 Component를 상속받게합니다. 그리고 밑에 render()은 함수인데, function render()라고 선언하지않아도 같은 기능을 하게 업데이트 되었습니다. return안에 header태그를 넣어줍니다. 그럼 header태그는 컴포넌트로 만들어 진것인데, 이것을 사용하려면 Subject태그를 내가 원하는 위치에 사용하면 되는것입니다. 브라우저에서 어떻게 보이는지 볼까요? 보면 header태그는 App클래스 div태그 안에 들어있는것을 보실 수 있습니다. 신기한것은 웹브라우저는 react의 존재를 모릅니다. 왜냐하면..

React/컴포넌트 2021.02.04

배포하는 방법 (npm run build, npx serve -s build) feat.Empty Cache and Hard Reload

1. Empty Cache and Hard Reload 이것은 아주 강력한 reload 입니다. 보통 성능을 위해서 다운로드해서 보관해 두었다가 그다음에는 접속하지 않습니다. 그리고 이것을 하면 캐시를 다 없애버립니다. 그리고 Network에 가면 1.8mb가 다운되어져 있는데 이것은 react에서 편의를 제공해주기위해 여러가지 기능들을 추가해 놓은 상태이기 때문입니다. 개발자들은 이렇게 무겁게 돌아가는것은 상관없지만, 사용자들까지 이렇게 무거우면 안됩니다. 1.8MG나 되는 무거운 환경입니다. 2. npm run build (배포버전 보기) 다시 VScode로 돌아가서 terminal에 명령을 해줍니다. npm run build 다음과 같이 명령을 하면 디렉터리에 build 폴더가 생성되어 있습니다. ..

React/기초 2021.02.03

create reate app에서 CSS 코딩작업 준비(feat. import에 대해서)

1. import에 대해서 우선 CSS코딩하기전에 알아두어야 할 것이 있습니다. 이것은 컴포넌트 이름을 지정하는곳으로 두개의 동그라미 안에 있는 문자들은 서로 같아야합니다. 저곳은 파일경로를 말하는겁니다. 그래서 컴포넌트와 별개로 경로와 파일의 이름을 동일하게 해줘야합니다. 2. CSS코딩하는방법 우선 스타일링하기전에 app.css와 index.css 안에있는 소스들을 다 지웁니다. src파일 안에있는 css소스코드를 완벽하게 지웠습니다. 이로서 스타일링 작업준비는 끝나게 됩니다.