리액트에 대한 이해

  • 리액트 라이브러리는 왜 사용하는 걸까?
  • 라이브러리 선택에는 여러 가지 기준이 존재한다
  • 현재 문제에 가장 적합한 기준을 선택해야한다
  • 예를들어 공통적인 기준으로는 많은 사용자 수 => 대형 커뮤니티 => 낮은 버그 발생률 => 높은 새로운 기능 업데이트 수 가 있다
  • 다른 이유로는 성능 / 속도 / 가독성 등을 이유로 들 수 있다

JSX (Javascript XML)

  • Javascript에 XML을 추가한 확장한 문법이다  
  • JSX는 공식적인 자바스크립트 문법이 아니라 바벨을 사용하여 일반 자바스크립트 형태의 코드로 transpiling 해주어야 한다
  • html 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙 사용
  • 태그 content가 비어 있으면 /> 닫는 태그를 사용해야함

조건부 렌더링

  • return 문 내에서 if else 문을 사용하려면 삼항 연산자만 가능함
    • ({condition} ? {result1} : {result2})
  • if문 은 && 논리 연산자로 표현 -> falsy 한 표현식이 포함되면 falsy 표현식이 return되니 조심
    • {false} && <div>test</div> => false return됨

component & props

  • 함수/클래스 컴포넌트 두가지 종류가 있음
    • 클래스 컴포넌트에서는 hook 사용 불가능
  • props: 사용자 정의 컴포넌트에 값을 전달 (읽기 전용 = 수정 불가 = 순수함수 처럼 side effect 없이 사용)
  • props.children: 컴포넌트의 여는 태그와 닫는 태그 사이의 내용 -> 요건 언제 사용? -> 사용자 정의 컴포넌트가 일반 html 태그와 비슷 할때 or 컴포넌트에 다른 컴포넌트를 전달할때
  • 팁: props를 받는 컴포넌트에서 destruturing으로 props 요소를 사용하는 것이 가독성에 더 좋음 (방법1), props를 넘겨 주는 컴포넌트에서 객체를 destructuring 해서 넘겨주는 방법도 있음 (방법2)
// 방법1
function 받는컴포넌트(props) {
  const {element1, element2} = props;
}

// 방법2
<넘겨주는컴포넌트 states={...{obj}}/>

클래스형 컴포넌트

  • 단점
    • 컴포넌트 상태 관련 로직 재사용불가 (hook 사용불가)
    • 이해하기 어려운 컴포넌트 유발 -> 가독성 저하, 컴포넌트 분리 및 테스트가 어려움
    • this가 무엇을 가리키는지 헷갈림

cra (create-react-app)

  • webpack, babel을 자동 설정 해줌
  • 리액트 개발환경 설정 제공 + boiler plate code 제공
  • 디테일한 요구사항에 맞게 cra 설정 수정하기는 어렵고 복잡함
  • cra 설지 과정
    • node.js 설치
    • npx (패키지를 임시 설치 하는 용도) create-react-app {폴더명}
  • package.json
    • dependencies = 프로젝트에 필요한 패키지
    • scripts = 스크립트를 실행할 명령어 (eject -> 모든 설정 값들이 밖으로 노출 -> cra 설정값을 변경할떄 사용, 이전 cra 구조로 되돌릴 수 없음)

state

  • 컴포넌트 상태를 변경 후 자동 render가 되지 않을때 state를 사용
  • 함수 컴포넌트는 그냥 함수이다
  • setState함수로 말고 state가 가리키는 값을 직접 변경하면 rerendering 발생하지 않음 (리액트에서는 얕은 비교로 주소값이 변하는지 감지 하기 때문)
    • 원시타입 state는 setState로 변경,
    • 참조타입 state는 setState({…obj,변경사항})과 같이 destructuring으로 새로운 참조형 값을 넣은 후 변경
  • props, state 공통점: props를 넘겨받거나, state가 바뀌면 rerendering이됨

리액트 리렌더링

  • 아래의 상황에서 리렌더링이 발생
    • state 값이 변경 됐을때
    • props 값이 변경 됐을때
    • 부모 컴포넌트가 리랜더링 됐을때

비동기 setState

  • 한번에 setState함수를 여러개 처리하면 비동기적으로 처리되어 몇몇 setState 함수의 결과가 반영되지 않을 수 있음
const [state, setState] = useState(0);
function test() {
  setState(state+1); // 1
  setState(state+5); // 2
}

// 1번 setState가 비동기적으로 처리되기 때문에 2번 
// setState만 처리되어 state 는 5라는 값을 가지게됨
test();
  • setState parameter 에 함수를 넣고 함수의 parameter에 state를 넘겨서 처리하면 (비동기적으로 처리되는것은 마찬가지지만) 위의 setState 결과가 겹치는 부분을 해결가능

단방향 데이터 흐름

  • 보통 데이터는 top down으로 부모에서 자식으로 전달 되어야함

state 끌어 올리기

  • 자식 컴포넌트 끼리 state를 교환하는 경우 부모한테 state를 올려서 이동 (single source of truth = 데이터를 한곳에서만 제어)
  • 부모 컴포넌트에서 useState를 사용해 state와 setState를 자식에게 넘겨주고 자식에서 변경이 일어나면 setState를 사용하도록함 다른 자식에게 업데이트된 내용을 넘겨 주기 위해 데이터를 가공하는 로직도 부모 컴포넌트에서 작성 필요

life cycle과 useEffect

  • 문제: 함수 컴포넌트일때 mount, unmount 됏을때만 실행되는 로직이 있을 수도 있음
  • solution: hook = 상태값과 여러 react 기능을 사용가능 하게 해주는 함수들
  • effect hook = useEffect({parameter1}, {parameter2}) (life cycle과 관련된 hook)
    • parameter2가 빈배열 = componentDidMount
    • parameter2가 없으면 = componentDidMount + componentDidUpdate
    • parameter2에 state를 넣은 배열을 넣으면(의존성 배열) = componentDidMount + state변경시 componentDidUpdate
    • 함수를 return하면 = componentDidUnMount (unmount될때 return 함수가 실행됨)
  • 코드가 무엇을 하느냐에 따라 useEffect를 나누어서 여러번 사용가능 (가독성 향상)
    • 예를들어 mount시 API를 불러올때 useEffect를 호출해 사용하고 unmount 될때 처리 되는 로직은 useEffect를 한번더 사용해 처리 가능

끝

😊