[React] 기초(props,state)

React는?

Facebook에서 주도하여 개발한 웹 애플리케이션의 UI를 효과적으로 구축하기 위해 사용하는 JavaScript 기반 라이브러리다.

React.js, React 둘 다 혼용하며, 다른 라이브러리들과 함께 사용할 수 있어 효율적인 라이브러리라고 할 수 있다.

React 자체는 framework라 부를 수 있는 기준인 라우팅, 상태 관리 기본 제공을 충족하지 못하기에 '라이브러리'이지만, React의 생태계는 framework이다.

React 특징

• 선언적(Declarative)이다
  • 리액트는 대화형 UI를 작성하기에 유리하다. 데이터가 변경되었을 때 효율적으로 랜더링을 수행할 수 있도록 한다.
• 컴포넌트 기반(Component-based)이다.
  • 캡슐화된 컴포넌트가 스스로 상태를 관리하고 복잡한 UI도 효과적으로 구성할 수 있다.
• 한번 배워서 어디에서도 사용이 가능하다.
  • 기존 소스를 불필요하게 다시 작성하지 않고 새 기능을 개발할 수 있다.
  • React의 작동 원리
  • Virtual DOM을 사용하여 UI를 빠르게 랜더링 한다.
  • virtual DOM은 또한 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 로직을 포함하는데 이로써 좋은 성능도 낸다
  • 단방향 데이터 흐름(Flux)을 갖는다
  • 장점
  • React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다.
  • Controller, directive, template, model, view처럼 로직을 분리하는 것이 아닌, Component 하나로 관리를 한다. (이게 view 역할을 담당)
  • 성능이 뛰어난 가비지 컬 랙터, 메모리 관리 기능을 지원한다.
  • UI 수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있다.
  • 다른 framework나 라이브러리와 병행해서 사용할 수 있다. 이는 개발이 이미 완료된 프로젝트에도 적절히 녹여낼 수 있는 확장성도 포함한다.
  • 단점
  • IE8 이하 버전은 지원하지 않는다.
  • view 이외의 기능은 직접 구현하거나 라이브러리를 사용해서 구현해야 하기에 javascript 배경지식이 필수 선행이다.
  • 데이터 모델링, 라우팅, Ajax 등 기능 지원이 안된다.
  • (치명적) 로딩 시간이 길다.
  • 웹의 궁극적 지향점과는 다소 동떨어져있다
    • 웹의 핵심: 모든 것을 streaming 하며, 페이지들은 HTML 태그들을 내포하고 가벼운 response만 브라우징 한다.
    • 리액트: 사이트에 필요한 자바스크립트를 처음에는 공백 페이지를 띄우며 다운로드한다.
    • 한번 다운로드 한 이후에는 다시 리소스를 다운하지 않아도 되지만, 처음 보이는 것이 없다는 것이 streaming 과의 차이이다.

간단히 Box 만들어보기

Box를 3개밖에 만들지 않았는데 코드가 길어지고 반복되는 코드가 계속된다.

이럴 때에는 Box.jsx를 따로 만들어 import로 끌어와서 쓰면 된다.

[props] 박스마다 이름을 다르게 기입하기

App.jsx에 태그에 name이라고 정하고 원하는 이름을 적어준다.

여기서 name은 정해진 것이 아니라 num이나 phone이든 본인 하고 싶은 대로 하면 된다.

props로 매개를 받고 props.name으로 각 Box태그 객체마다 정해준 이름을 출력한다.(props는 객체 타입이다.)

[state]

 

[count2 , setcount2]에서 count는 기본값이고

setcount는 바뀌는 값이라고 생각하면 쉽다.

count = count + 1 은 console을 보면 실행이 되는 것을 볼 수 있지만 UI에는 변화가 없다.

setcount2 ( count2 + 1 )를 해주면 현재 count2는 0으로 설정되어있다 +1을 하면 1이 되어 UI에 찍는고 증가 버튼을 한번 더 누르면 2가 된다.

하지만 console에는 한 박자가 늦는데 그 이유는

⇒ state가 변수가 0에서 1로 바뀌었는데 매번 바꿔주는 작업은 컴퓨터도 힘들어한다. 그렇기에 return 해서 화면에 띄우는 것까지

하고 나서 변경을 하기에 한 박자씩 느리게 되는 것이다.

 

 

<출처> 유튜브 코딩 알려주는 누나 리액트