React 기본 간단 정리

-component, state, props, rerendering-

React의 장점

모바일 앱으로 발행이 쉬움
앱처럼 뛰어난 UX
일반 웝사이트보다 비즈니스적 강점

React 셋팅

React를 이용하려면 라이브러리를 설치는 주로 npm으로 설치되기때문에 node.js 설치 필요
순서 : node js 설치 -> create-react-app 프로젝트명

CRA 후 폴더 구조

메인 페이지 : App.js
-> 메인페이지에 들어갈 JSX(html) 짜는 곳
-> 내용을 public의 index.html로 넣어달라고 index.js가 명령함
실제 메인 페이지 : public < index.html
app.js 의 html 내용이 index.html에 집어넣음
(넣도록 명령하는 것 : index.js)
node_modules : 구동하기 위한 라이프러리를 모음
public : static 파일 보관함(정적인 부분)
src : 소스코드 보관함

React 특징

태그에 class를 주고 싶을 때 -> className으로 줘야함
데이터 바인딩이 쉬움 = 방법 : {변수명} / {함수명( )}
**데이터 바인딩이란 : 서버에서 받아온 데이터를 html에 넣는것
이미지 import 하기 : import로 불러들이고 import 이미지 from ‘이미지 경로’
1 <img src={이미지} />
형식으로 중괄호에 입력
JSX 에서 style 넣기

  
style = [{color: 'blue', fontSize:10px;}]
// 대괄호 -> 중괄호로 바꿔야함. 오류로 인해 대괄호로 입력

형태로 대괄호로 감싸고 넣어야함

띄어쓰기나 ‘-‘로 입력이 아니라 camelCase 작명관습에 따라 띄어쓰는 부분의 첫글자는 대문자

Component

HTML 한단어로 줄여서 쓸 수 있는 방법 : Component 사용

component 유의사항

이름은 대문자
return 안에 있는건 태그 하나로 묶어야함

Component로 만들면 좋은 것들

반복출현하는 HTML 덩어리들
자주 변경되는 HTML UI들
다른 페이지를 만들 때도

단점(component를 많이 만들때)

state를 쓸 때 복잡해짐
상위 컴포에서 만든 state를 쓰려면 props 문법을 사용해야함

State

데이터는 변수/state 에 보관

리액트의 데이터 저장공간 state 만들기

{useState} 상단에 첨부
useState(데이터) let [a,b] = useState(‘’);

a = state 데이터
b = state 데이터 변경 함수(대체할 데이터)

State의 특징

변수 대신 쓰는 데이터 저장공간
` useState( )`를 이용해 만들어야함
문자, 숫자, array, object 다 저장가능

State의 장점

웹이 app처럼 동작하게 만들고싶어서[웹(데이터)이 변경될 때]
-> HTML이 자동으로 재렌더링 됨(그냥 변수는 자동 재렌더링이 안됨)
–> 새로고침 없이 스무스하게 변경

** 자주 바뀌는, 중요한 데이터는 state 사용 추천

onClick={클릭될 때 실행할 함수}
onClick={( ) => {실행할 내용}} – 화살표 함수
onClick에 함수가 들어가는 경우
-> 함수( ) 형태로 들어가면 안됨
–> 함수명( )가 되면 바로 실행이 됨

state 데이터 수정 테크닉

기존 state 카피본 만들기(원본 state 수정 X)
카피본에 수정사항 반영
변경함수( )에 집어넣기
일단 상단에 useState가 잘 import 되어있는지 확인
useState만들 때 함께 만들어놨던 함수를 사용
array 자료형인 경우(등호사용 X) 사본을 만들어서 변경
사본 만드는 법
let newArray = […기존state이름]
-> newArray를 수정
-> state 데이터 변경(newArray)
-> 제대로 state 변경이 가능

** 복사본을 만들어 수정하지 않으면 – 값공유가 되어버림
-> deep copy를 위해 별개의 복사본 만들어 수정해야함

Props

부모 컴포넌트로부터 받아온 데이터(컴포넌트 간의 정보 교류)

props 사용 방법

  
function Mother() {
     const name = "현징";
     return <Child myName={name} />;
}

function Child(props) {
     return <div>{props.myName}</div>; // 위 Mother의 props를 props.전달명 형식으로 받음
}

위처럼 부모 -> 자식 컴포넌트에게 정보 전달 시 props를 사용함

  
방법 1)
function Todo(props) {
     return <div>{props.title}</div>;
}
방법 2)
function Todo({ title }) {
     return <div>{title}</div>;
}

일반적으로 props.전달명 형식으로 작성하며 구조 분해 할당을 이용하면 위의 코드처럼 간략하게 입력 할 수 있음

방법 1이 기본적인 방법이나 최근엔 방법 2를 주로 씀

*구조 분해 할당?

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식
props 는 객체 리터럴(object literal) 형태의 데이터이기 때문에 방법2처럼 해당 부분(예시에서는 title)을 { }로 감싸줌

defaultProps

: 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기값
자주/무조건 받아야하는 props가 있을 때 사용

  
방법 1)
function Child({ name }){
	return <div>내 이름은 {name} 입니다. </div>
}

// defaultProps 형태
Child.defaultProps={
	name: '기본 이름'
}

방법 2)
++ 구조 분해 할당 형식
function Child({ name = '기본이름' }){
	return <div>내 이름은 {name} 입니다. </div>
}

위의 예시에서
defaultprops 설정 X 결과 : 내이름은 ““입니다
defaultprops 설정 O 결과 : 내이름은 “기본이름”입니다

props를 받기 전까지 임시로 사용할 수 있는 props 설정 -> 값이 입력되면 새로운 props의 값으로 변경됨

Props Children

: 태그와 태그 사이의 모든 내용을 표시하기 위해 사용(Layout 컴포넌트를 만들 때 주로 사용)

  
function User(props) { // 구조분해할당 - {children} 으로도 사용 가능
  return <div>{props.children}</div>;
}

function App() {
  return <User>안녕하세요</User>;
}

Re-rendering (리렌더링)

rendering(렌더링) : 사용자 화면에 내용을 보여주는 것
rerendering(리렌더링) : 화면에 뷰를 다시 새롭게 보여줌
- 컴포넌트가 업데이트되는 과정에서 리렌더링이 발생
  -> reder함수로 인해 새로운 요소로 갈아끼워짐
  -> 이전에 생성한 컴포넌트 정보와 다시 렌더링한 정보를 비교해 최소한의 연산으로 DOM트리 업데이트
  -> 새로운 요소로 갈아끼워짐
- 리렌더링 조건
  1. state 변경이 있을 때 : useState() 메서드를 통한 데이터 변경
  2. 새로운 props가 들어올 때 : 전달받은 props 값의 업데이트
  3. 부모 컴포넌트가 렌더링될 때 : 부모 컴포넌트가 리렌더링 -> 자식 컴포넌트도 순차적으로 리렌더링
  4. shouldComponentUpdate에서 true가 반환될 때 : state가 변경되거나 새로운 props를 전달받는 경우 실행되는 메서드 ==> 필요하지않는 경우 return value 설정으로 막을 수 있음
  5. forceUpdate가 실행될 때 : props나 state가 아닌 다른 값이 변경되었을 때 리렌더링을 하고 싶다면 사용하는 메서드
- 지나친 리렌더링은 성능을 약화시키기때문에 필요할 때만 작동하게 함으로써 최적화 작업을 해줄 수 있음

*참고
애플코딩 유튜브
항해 99 react 입문 자료
https://seungddak.tistory.com/109

22.10.09 props 부분 추가!

React | Component, State, Props, Rerendering