React (●'◡'●)
- 자바스크립트로 뷰를 만들기 위한 라이브러리
- SPA(전체 화면을 리렌더링하지 않고 변경된 일부분만을 리렌더링 할 수 있는 컴포넌트 기반의 애플리케이션)
- 출력시스템은 Virtual DOM이라는 개념을 사용함
- Virtual DOM이란?
- ( 메모리 상에 가상으로 DOM을 복사해서 현재 화면에 출력된 DOM과 비교를 한 후 변경된 부분만 리렌더링하는 개념)
- 기반지식
- ajax / fetch API / axios (외부 데이터를 가져올 수 있는 부분을 학습해두는 것이 좋음.
- js(기본 확장자)
- jsx (HTML에 사용되는 자바스크립트와 구분하기 위해 사용
- tsx (타입스크립트 문법을 사용한다는 것을 명시할 때 사용)
- Component
- 화면을 구성하는 단위
- View(하나의 화면) > Component(Segment - Control을 1개 이상 모아서 만든 논리적인 화면 구성 단위) > Control(작은 부품 하나)
- 만드는방법
- 클래스로 구성
- Component라는 클래스로부터 상속을 받은 render라는 함수에 출력할 내용을 리턴하는 형식으로 생성.
- 멤버 변수 사용이나 수명 주기 메서드를 사용하는 것이 편리함.
class 이름 extends Component{ render(){ return 출력할내용} };- 함수로 구성
- 출력할 내용을 리턴, 클래스로 만드는 것보다 가볍고 속도가 빠름
- 최근에는 함수로 구성하는 경우가 많다
function 이름 (){ return (출력할 내용)}; 또는 const 이름 = () =>{ return (출력할 내용)}; - 만들 때 주의사항
- 컴포넌트는 Root가 1개여야 함. 요소가 여러개라면 div, span, <> 태그로 묶어서 표현
- React에서는 데이터 원본을 직접 수정하지 않는다. 다른 곳에서 넘겨준 데이터를 복제해 수정한 후 다시 대입하는 형태를 취한다.
- Props (properties)
- 상위 컴포넌트에서 하위 컴포넌트에게 데이터를 넘겨줄 때 사용하는 개체
<컴포넌트이름 props이름 = 값...> //개수 제한 없음 1. 클래스형 컴포넌트 사용시 this.props.이름 2. 함수현 컴포넌트 사용시 const(function) 컴포넌트이름 = (props) => { return ( 출력할 내용 ) }; //모든 props를 하나로 묶어 함수의 매개변수로 이용해 사용- props.children 을 이용해서 상위 컴포넌트에서 태그 안에 삽입한 데이터를 읽어낼 수 있다.
- 비구조화 할당
- 자바스크립트는 객체를 분해해서 할당하는 것이 가능 ⇒ 분해해서 할당할 때는 인덱스가 아니라 이름을 가지고 데이터를 할당함.
// (props.children)이용 const Mycomponent = (props) =>{ return (<><div> 나의 컴포넌트 이름은 {props.name} 입니다. <p>{props.children}</p> </div> </>) }; -------위 아래 코드 동일 결과 출력------------ // (비구조화 할당) const MyComponent = ({children, name}) => { return(<> <div>나의 컴포넌트의 이름은 {name} 입니다.</div> <p>{children}</p> </>) };- Props의 유효성 검사 기능
- 작업하는 프로젝트의 규모가 커질 수록 작고 큰 에러가 발생할 확률이 높다. 이를 방지하기 위한 방법으로, PropTypes를 활용하여 타입(type)의 유효성을 검사를 실시한다.
- 부모로부터 전달받은 prop의 데이터 type을 검사한다. 자식 컴포넌트에서 명시해 놓은 데이터 타입과 부모로부터 넘겨받은 데이터 타입이 일치하지 않으면 콘솔에 에러 경고문이 띄워진다.
- props 값을 전달 시, 문자열이 아니면 { } 로 감싸야한다. 기본적으로 XML에서는 태그안의 속성은 문자열만 가능하기 때문이다.
- State
- 컴포넌트가 가질 수 있는 상태
- props는 상위 컴포넌트에서 하위 컴포넌트에게 데이터를 넘겨줄 때, 읽기 전용으로만 넘겨주는데, 이 때 Component 내부에서 읽고 쓸 수 있는 값을 사용하고자 할때 State를 사용
- 기본값을 설정할 수 있으며 setter 메서드를 이용해 수정하는 것도 가능
- state 에 함수 전달
- state 도 하나의 속성이고 자바스크립트는 함수도 하나의 데이터이므로 state에 함수를 전달하는 것이 가능
- import React, {Component} from 'react'; class StateComponent extends Component{ constructor(props){ //상위클래스의 생성자 호출 super(props); //state생성 this.state = {number:0} } render() { return( <> <p>숫자:{this.state.number}</p> <button onClick={(e) => { this.setState( {number:this.state.number+1}, () => { console.log('state 의 값이 변경됨'); console.log(this.state); } ) }}>증가</button> </> ) } } export default StateComponent; =>setState에 2번째 매개변수로 함수를 전달하면 state 설정을 변경한 후 호출되는 함수를 설정할 수 있다. 한 곳에서만 사용하는 데이터가 있는 경우, 로컬의 데이터를 업데이트 하고 업데이트가 끝나면 서버에 업로드를 하는 형태를 만들 때 유용하게 사용할 수 있다.
- state 에 함수 전달
- 1. 클래스형 컴포넌트의 경우 초깃값 설정은 constructor(props) 메서드에서 수행 this.state = {state 이름: 값,.......} 2. 클래스형 컴포넌트의 경우 값의 수정은 setState 메서드를 이용 this.setState({state이름:값,....})
- State 사용시주의사항
- state를 수정할 때는 클래스형 컴포넌트에서는 setState를 이용
- 함수형 컴포넌트에서는 useState 함수를 이용
- 객체 나 배열을 수정할 때는 복사본을 만들고 수정해야 한다.
- let object = {'name':'adam', 'age':29}; //name 수정 - object 의 속성을 직접 수정 [object.name](<http://object.name/>) = '군계'; //기존 object 의 내용을 복제해서 name을 수정 const copyObject = {...object, 'name':'군계'}; let ar = [1, 2, 3]; //배열에 직접 추가 ar.push[4]; //배열을 복제해서 추가 let copyAr = ar.concat(4); //배열에서 데이터를 삭제하거나 변형을 가하고자 할 때는 filter 나 map 함수 이용 filter 나 map은 작업을 수행한 후 새로운 배열을 생성
- 참고링크
'카카오 클라우드 스쿨' 카테고리의 다른 글
| [node.js] 미들웨어 (0) | 2022.11.21 |
|---|---|
| [node.js] 쿠키와 세션의 차이 (0) | 2022.11.17 |
| [node.js]axios 라이브러리 (0) | 2022.11.17 |
| [node.js] 양방향 암호화 실습 (0) | 2022.11.16 |
| [node.js] Require 함수 (0) | 2022.11.16 |