리액트 기본 개념 정리

해당 포스팅은 이전에 들은 강의를 토대로 핵심을 정리.

 

 

 

조건부 렌더링

JSX 리스트와 키

li 엘리먼트를 사용할 때는 key속성을 추가 해줘야하 한다.

 

작은 컴포넌트로 나누기

단일 책임 원칙을 위해 한 컴포넌트는 한 가지 역활만 가지게 한다.

 

 

 

상태 끌어 올리기

동일한 데이터에 여러 컴포넌트가 의존하는 경우가 생기는데 

이럴 경우에는 가장 가까운 부모 컴포넌트로 state를 끌어올리는 것이 좋다

SearchForm에서 관리했던 searchKeyword를 부모 컴포넌트인 App의 state로 끌어 올렸다(1).

 

이 값(searchKeyword)을 SearchForm의 props로 전달하고(3)

 값을 갱신할 목적으로 onChange에 콜백 함수도 전달했다(4).

 

콜백함수는 handleChangeInput() 메서드를 호출하는데 변경값으로 상태를 갱신한다(2).

 

SearchForm은 App 컴포넌트에 의해 제어된 컴포넌트인 셈이다.

 

부모 컴포넌트로 옮겨버렸린 state는 더 이상 사용하지 않기 때문에 함수 컴포넌트로 변경했다(1).

 

input을 제어 컴포넌트로 만들 듯 SearchForm도 제어 컴포넌트로 만들기 위해 

props.onChange() 함수로 입력한 값을 전달한다(2, 4).

이 값은 곧장 props.value로 들어와 input의 값으로 반영될 것이다(3).

 

 

Axios

브라우저,Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리.