React

이진경·2019년 10월 4일
0

06221ac4ae96f681e3bed114dd1bdd9f.jpg

REACT

가상 DOM을 활용하여 부분적인 렌더링을 하는 자바스크립트 라이브러리(프레임워크x)
SPA(Single Page Application)

  • 리액트의 특징
    (1) 화면 view단을 구현하기 위한 최소단위로 재사용가능한 component를 사용
    (2) component를 조립하여 완성된 view를 만듬
    (3) JSX(Javascript XML) 사용
    (4) 단방향 데이터 바인딩 ( 부모->자식으로서의 데이터흐름)

  • 리액트의 장점
    (1) component를 사용해서 유지보수가 용이
    (2) 생태계가 넓고, 다양한 라이브러리 사용 가능
    (3) virtual DOM을 활용하여 빠른 렌더링이 가능
    (4) 단방향 데이터 바인딩을 통한 디버깅 용이, 다른 라이브러리에 비해 안정성이 높음
    (5) 리액트 네이티브를 활용하여 앱 개발 가능

JSX ; javascript 확장 문법.

꼭 하나의 태그로 시작하기, 무조건 부모가 있어야 함.
tag 만 나란하게 2개로 있으면 안됨. 있어도 되는 데 부모 태그 안에 있어야함
JSX내에서 js사용하려면 중괄호

//HTML과 비슷하게 생겼고 js파일 내에서 사용가능
//html문법을 js코드 내부에 써주는 것이고 변수저장 및 함수 인자로 ,넘길 수 있다.
 
 const hi = <p>Hi</p>;
//속성에 따옴표를 이용해 문자열을 정의.
const element = <div tabIndex="0"></div>;
//중괄호를 사용하여 attribute에 JavaScript 표현식을 삽입.
const element = <img src={user.avatarUrl}></img>;

-attribute에 JavaScript 표현식 사용 시,
따옴표(문자열 값에 사용) or 중괄호(표현식에 사용) 중 하나만 사용. 동일한 속성에 두 가지를 동시에 사용 안돼안돼.
-self-closing tag : tag사용시 ,

=
와 같음

Component ; 컴포넌트는 함수 컴포넌트과 class컴포넌트가 있음.

컴포넌트란 재사용이 가능한ui 단위
컨포넌트 하나만 만들고 그 하나의 파일에 필요한 html, css,js모두 합쳐서 만들 수 있고 재사용 가능합. input디자인이 바꼈을 때 css한줄만 수정하면 로그인, 회원가입, 내정보수정 페이지에 바뀐 디자인이 모두 반영됨!!
컴포넌트는 함수랑 비슷하고 여기서는 input을 props라고하고 return은 화면에 보여져야할 react요소가 return.

  • 함수형
//return할 때 jsx로 리턴. render 필요없음.
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
  • 클래스형
    함수 호출하듯이 클래스도 호출해야함.
    클래스 내에서 서로 변수를 쓰려면, 값을 가져오려면 'this'사용해야함. 변수 이름 갖고는 안됨.
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
  • Render : 클래스 형일 떄 무조건 render() 함수 사용해서 return을 jsx로 해야함. 그걸 화면에 뿌려줌.
    리액트는 데이터가 바뀔때마다 render가 다시 호출됨
  • constructor : 어떤 행동을 하자마자
  • event : 무조건 arrow function사용해서 이벤트 걸어야함.
    곧, 브라우져가 갖고 있다는 것.
    ** 'this'는 자기가 속해있는 객체를 뜻함
    (어디에서 호출 되었는지, 호출된 곳의 객체를 가르키는데 자꾸 window를 가르키게 되서 문제가 많아진 것을 arrow function이 이 나오면서 실제 속해 있는 앱을 가르키게 됨.
    (왜냐하면 브라우져가 갖고 있다가 이벤트를 쏴주게 되니까)
  • Props : 컴포넌트에서 사용할 데이터 중 변경되지 않는 데이터를 다룰 때 사용.
    부모 컴포넌트-> 자식컴포넌트로 전달 할 때.
    컴포넌트 간에는 무조건 props를 통해서만 데이터를 주고 받고 props는 내부에서 변경x.
    컴포넌트 간에 단방향으로 데이터를 주고 받음

  • state : 유동적인 데이터를 다룰 때 사용.
    사용자의 액션, 네트워크 응답 등등 변경시에는 'setstate'메서드를 사용해서 상태를 변경(state수정할 땐 setstate사용).
    스테이트는 객체로 관리 - 관리해야할 데이터가 많아서
    어떤 스테이트 사용하겠다 정의할때 constructor안에서..

  • constructor : 앱이 시작될 때 constructor부터 호출됨
    두번째 호출은 렌더
    (리액트의 라이프 사이클 의미는 어떤 순서로 호출되느냐.
    화면에서 최초에 한번만 불리고 랜더는 state가 변할 때마다 계속 호출됨

  • super : 리액트 컴포넌트 내에 있는 걸 가져오겠다는 뜻, 클래스에서 쓰는 약속. 꼭 써야함.

0개의 댓글