React.js state, life-cycle, event

1. State

   • Component에 대한 변경 가능한 데이터, 사용자가 정의
   • 이미 정의된 state는 직접 수정할 수 없다. 수정이 필요한 경우 setState() 메소드 이용
   • 정확히 말하면 직접 수정하면 리액트가 수정된 것을 인식할 수 없기에 메소드를 사용해야함
   • strict 모드에서는 compile조차 안된다…
   • constructor 생성자 : Component가 실행될 때 render 메소드보다 먼저 실행되면서 state 값을 초기화
   • constructor(props) {super(props); 코드 작성 }
   • this.state = {state명: {key : value}}
   • 상위 컴포넌트의 state 값을 하위 컴포넌트의 props로 전달 = 은닉화

   

   
   

   • li태그 등 여러개의 값을 다룰때 배열 형태로 state를 작성하여 props를 넘길 수도 있다.
   • 여려 개의 element 자동 생성시 각 element들은 key(식별자)라는 props를 가져야한다.

   

   

   
   

2. Component Lifecycle Method

   • componentDidMount() : 컴포넌트가 마운드 된 후 호출
   • componentDidUpdate() : 컴포넌트 state 변경 등 re-render시 렌더링 완료 후 호출
   • componentWillUnmount() : 컴포넌트 unmount 직전 호출

   
   

3. Event

   • 이벤트 설치
   • 클릭이벤트는 HTML에선 onclick=’’ 이지만 리액트에서는 onClick={}의 형태로 작성
   • Arrow Function 사용 안하고 onClick에 함수 정의하면 bind(this) 붙여주어야한다.
   • Arrow Function의 this는 상위 스코프의 this를 가르키기 때문

   

   • 상위 컴포넌트(App)에서 하위 컴포넌트에 이벤트 걸때 onChangePage를 props의 형태로 전달할 수 있다.
   • 하위 컴포넌트에선 this.props.onChangePage()로 이벤트 설치

   

   

   
   

참고 자료

생활코딩-React.js

reactjs.org - 공식홈페이지

goormedu - 처음 만난 React

React.js 개발환경 구축 및 component,props

리액트의 장점 : 빠른 업데이트 & 렌더링 속도

• Virtual DOM : 가상의 DOM으로 Browser DOM을 전부 수정하지 않고 바뀐 부분만 re-render

• Component-Based : 컴포넌트를 정의하고 재사용한다. (Reusability)

리액트에서 쓰이는 언어는 페이스북에서 만든 유사 자바스크립트 언어인 JSX 이다.

JSX = JavaScript + XML/HTML

but, 필수로 JSX를 써야하는건 아니지만 쓰면 편하다.

HTML 태그 안에 { 중괄호 } 안에 Javascript 코드를 쓴다.

1. Component

   • 리액트에서는 컴포넌트화가 중요

   • 가독성

   • 재사용성

   • 유지보수성

   • function component

   • class component

   • 컴포넌트명은 항상 대문자로 시작해야한다. 소문자는 html 태그로 인식하기 때문

1. 개발환경 구축 (Windows 기준)

   • reactjs.org - 공식사이트
   • create React App - Toolchain 개발 도구 모음
   • node.js의 npm으로 설치
   • npm install -g create-react-app

   

   
   

   • 공식 메뉴얼 npx 설치방법
   • npx : 임시로 설치해서 한 번만 실행하고 삭제하는 방법, 사용시마다 최신버젼 설치
   • npx create-react-app
   • create-react-app을 이용한 개발환경 구축
   • cmd 상에서 workspace 경로로 이동 후 create-react-app .
   • npm run start 시작
   • ctrl + c 종료
   • npm run build 빌드하기
   • npm install -g serve serve 설치
   • npx serve -s build 빌드한 build 폴더를 root로 웹서버 배포

   
   

2. 컴포넌트 제작

   • 함수 형태와 클래스 형태로 컴포넌트를 만들지만 수업에서는 클래스 이용

   • class 안의 함수는 function 생략 가능
   • Component를 상속받은 클래스 생성 후 render() 메소드 호출
   • Component 클래스를 사용하려면 import React, { Component } from ‘react’; 명시적으로 import를 시켜주어야 한다.
   • return (); 안에 컴포넌트화할 HTML 태그를 넣는데 하나의 최상위 태그만 써야한다.

   

   
   

3. props

   • HTML의 태그 속성(attribute)을 리액트에서는 props라 한다.
   • props는 Read-only 속성으로 props를 직접 바꿀 수 없고 같은 props에 대해서는 같은 결과만을 보여주어야 한다.
   • js의 function처럼 리액트의 component는 props를 입력받아 element를 출력한다.
   • APP에서 컴포넌트 호출시 컴포넌트에 사용자가 정의한 속성을 부여하고자 할 때, 컴포넌트에서 ‘{this.props.속성명}’으로 사용 -> 컴포넌트의 재사용성

   

   
   

4. React Developer Tools

   • 크롬 확장앱
   • 리액트의 각 컴포넌트 및 props 열람 가능
   • 개발자 모드 상에서 수정도 가능

   
   

5. 컴포넌트 파일로 분리하기

   • 컴포넌트에서 ‘export default 컴포넌트클래스명’
   • APP(컴포넌트를 사용할 곳)에서 ‘import 클래스명 from ‘컴포넌트path(확장자 생략)’‘

참고 자료

생활코딩-React.js

reactjs.org - 공식홈페이지

goormedu - 처음 만난 React

2021-01-25 TIL 리액트 공부 시작

• 오늘 한 것
  1. 리액트 공부 시작 - 생활코딩 - React.js, 구름에듀 - 처음만난 리액트로 기초적인 개념만 먼저 잡고 전문 강의를 들으려고 한다. 학원 커리큘럼에 없는 것이기도 하고 개인적으로 배우고 싶어서 하는 거라 여기저기 자료들을 많이 찾아봤다. 우선 저 무료강의로 개발환경 구축, 기본 배경지식만 빠르게 습득을하고 해외 유명 강의(React - The Complete Guide 등)로 독하게 파볼 생각이다. 영어엔 조금 자신이 없지만.. 기왕 듣는거 최신 기술을 배우자
  2. 학원 비대면 수업(15:30~22:00)

• 내일 할 것
  1. 리액트 공부 - 생활코딩, 구름에듀 수강 완료
  2. 학원 비대면 수업(15:30~22:00)

• 끝으로

당분간 리액트 공부에 전념해야겠다.

오늘의 한 줄 총평 : 리액트 공부 시작

2021-01-22 TIL - 개인 프로젝트 최종 완성

• 오늘 한 것
  1. 개인 프로젝트 채팅 최적화 - 학원 시험을 보기 위해 네트워크 파트를 공부하던중에 알게된 정보가 있었다. javaFX에서 스레드 구현시 사용자가 정의한 스레드에서 UI를 변경하면 JavaFX Application Thread와 충돌이 일어난다는 것이었다. JavaFX Application Thread가 UI생성 및 변경을 담당하는 녀석인데 내가 채팅 작업 스레드상에서 서버로부터 받은 정보를 UI에 출력하려고 해서 예외가 발생했던 것. 서버와 클라이언트 스레드에서 문제가 발생하는줄알고 온갖 시도를 하며 디버깅에 힘썼는데….결론은 Platform.runLater() 메소드에서 UI 변경을 나중으로 미루어서 네트워크 통신시간을 벌어주니 해결되었다.
  2. 학원 비대면 수업(15:30~22:00)
  3. 개인프로젝트 PPT 완성 - 문서화? 라고하면 문서화지만 발표 준비를 위한 PPT 작업이었다. 개발환경과 요구사항 분석, DB 및 클래스 구조 설명, 시연 설명, 개선사항이 들어있으니 문서화 맞네.

• 내일 할 것
  1. 학원 시험 - 네트워크 채팅 프로그램 구현
  2. 신년 모임

• 끝으로

개인프로젝트가 끝난 것도 있고 여차여차해서 내일은 오전중으로 학원 시험을 다 끝내고 신년 모임을 가져야겠다.

오늘의 한 줄 총평 : 아무튼 개인 프로젝트 완료

2021-01-21 TIL

• 오늘 한 것
  1. 개인 프로젝트 최적화 및 2차 완성 - 아쉬운 부분이야 많지만 기한이 있는 작업이라 오늘 채팅쪽 버그들을 잡고 여러번의 테스트를 거친 후 마무리를 짓기로 했다. 코딩 이외에도 문서화, 발표준비 등 여러 해야할 일들이 있기에 마냥 코딩만 잡고있을 순 없기때문이다. 완벽한 코드는 아닐지라도 2주동안 힘겹게 쌓아올린 결과물을 보니 뿌듯하긴하다.
  2. 학원 비대면 수업(15:30~22:00) oracle 활용

• 내일 할 것
  1. 개인 프로젝트 - ppt 완성
  2. 학원 비대면 수업(15:30~22:00)
  3. 리액트 공부?

• 끝으로

이제 ppt 만들어야지….끝날때까지 끝난게 아니다…

오늘의 한 줄 총평 : 코딩은 완성