리액트는 또 뭔대

김듑듑·2022년 5월 15일

프론트엔드

목록 보기

2/24

리액트는

자바스크립트 라이브러리(JS 응용 프로그램 아키텍처 라이브러리)의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다.
state 및 props 를 사용하여 데이터 저장 및 처리 방법을 간소화한다

라이브러리들

React : React 최상위 API
React DOM : DOM 전용 메소드
Babel : 오래된 브라우저에서 ES6+를 사용할 수 있게 해주는 JavaScript 컴파일러

입문자를 위한 React

https://www.taniarascia.com/getting-started-with-react/

음 너무 많은데????

React로 사고하기_앱을 설계하는 방식

UI를 컴포넌트 계층 구조로 나누기

정적 버전 만들기

지금은 정적 버전 만드는 중이니 state를 쓰지 말기
규모가 커지면 bottom up 방식이 좋다

가장 최소한의 state를 찾기

예를 들면 todo리스트를 만든다 생각해보자
🙅 todo item을 저장하는 배열만 유지하고 todo item 개수를 표현하는 state 만들지 말기🙅
🙆 todo 아이템 배열의 길이를 가져오면 됨 🙆
state가 아닌 애들 : 부모로부터 props를 통해 전달되는 애들 / 시간이 지나도 안변하는 애들 / 컴포넌트 안의 다른 state나 props를 가지고 계산가능한 애들

state가 어디있어야할지 찾기

state를 쓰는 컴포넌트들 중 상위에 있는 하나의 컴포넌트 찾기
만약 없다면 state를 쓰는 컴포넌트 하나 만들어서 상위에 추가하기

역방향 데이터 흐름 추가하기

리액트는 컴포넌트 계층구조를 따라 아래로 내려가는 단방향 데이터 흐름을 따름
컴포넌트는 자신의 state만 변경할수 있음
이제 우린 지하2층(검색바)에서 지하1층(상품필터테이블)으로 state를 업데이트 해야함
상품필터테이블은 검색바에 콜백을 넘김, 이 콜백은 state가 업데이트 되어야할때마다 setState()를 호출 👉 검색바에 onChange 이벤트를 사용해 알림

react의 state

state와 props의 차이

state는 컴포넌트 안에서 관리됨
props는 like 함수 매개변수, 컴포넌트로 전달됨 그리고 읽기전용임!!!

setState

setState 호출은 비동기적으로 이루어짐

이전 state 값을 기준으로 값을 계산해야한다면 객체 대신 updater 함수를 전달하시오

setState는 eventHandler 안에서 비동기적임

부모, 자식모두 clickEvent에서 setState를 호출하면 자식은 2번 렌더링 되지 않음
브라우저 이벤트가 끝날 때 state를 일괄 업데이트함

그럼 일단 여기에 익숙해지고 state 관리하는 라이브러리들을 써보시오 👉 recoil, redux

예시

incrementCount() {
  this.setState({
  	count: this.state.count + 1
  });
}

handleSomething() {
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();
}

this.state.count는 1이 됨
React는 컴포넌트가 리렌더링될 때까지 this.state.count를 갱신하지 않기 때문입니다.
incrementCount()는 매번 this.state.count의 값을 0으로 읽은 뒤에 이 값을 1로 설정합니다.

해결책

incrementCount() {
  this.setState((state) => {
    return {count: state.count + 1}
  });
}

handleSomething() {
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();
}

지금 this.state.count 값을 읽어 보면 이 값은 여전히 0
but React가 컴포넌트를 리렌더링하게 되면 이 값은 3이 됨

마운팅, 언마운팅

DOM이 렌더링 될때마다 clock 타이머 설정 👉 마운팅
만들어진 DOM이 삭제될때마다 clock 타이머 해제 👉 언마운팅

리스트와 key

예시를 보자

function NumberList(props) {
  const numbers = props.numbers;
  
  const listItems = numbers.map((number) =>
  🙅 <li>{number}</li>
  🙆 <li key={number.toString()}>{number}</li>
  );
  
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

또 다른 예시

function ListItem(props) {
  return 
  🙅 <li key={value.toString()}>{value}</li>
  🙆 <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  
  const listItems = numbers.map((number) =>
  🙅 <ListItem value={number} />
  🙆 <ListItem key={number.toString()} value={number} />
  );
  
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

form, 제어 컴포넌트

폼 엘리먼트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트함
setState()에 의해 업데이트 필요

예시_여러개의 input이 있을때

handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? 
    	target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

<input
   name="isGoing"
   type="checkbox"
   checked={this.state.isGoing}
   onChange={this.handleInputChange} />
<input
   name="numberOfGuests"
   type="number"
   value={this.state.numberOfGuests}
   onChange={this.handleInputChange} />

비제어 컴포넌트

state 업데이트에 대해 eventHandler 대신 ref를 써서 DOM에서 폼 값을 가져올 수 있다

constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fileInput = React.createRef();
  }

handleSubmit(event) {
    event.preventDefault();
    alert(`선택-${this.fileInput.current.files[0].name}`;
  }

<form onSubmit={this.handleSubmit}>
	<input type="text" ref={this.input} />
</form>