[데브코스] 48일차 TIL (React)
데브코스
공부
TIL
javascript
React
2022-05-25

들어가며

Vue 강의가 끝이 나고, 과제도 끝이 났다. 일주일간 복습 기간을 가지고 오늘부터 리액트 강의가 시작 됐다. 혼자 공부할 때 리액트를 공부했었는데 기본이 부족한 것 같아 항상 아쉬운 느낌이 있었다. 이번 강의를 통해 기본부터 차근차근 공부할 수 있으면 좋겠다.

리액트란?

리액트는 2013년 5월에 페이스북이 오픈 소스로 공개한 프론트엔드 라이브러리이다. 리액트라는 이름은 Reactive Programming(반응형 프로그래밍) 에서 따왔다고 한다. 반응형 프로그래밍이란 상태라는 개념을 사용해 데이터를 관리하고 상태가 변하는 경우, 그 상태에 의존하고 있는 다른 값도 변경된다고 한다. 일상에서 많이 사용하는 예로 엑셀이 있다. 엑셀에서 수식을 이용해 값을 계산할 때, 의존하고 있는 셀의 값이 바뀌면 결과값도 자동으로 바뀐다.

리액트 프로젝트 시작하기

리액트는 프론트엔드 라이브러리이기 때문에 필요한 곳에 점진적으로 적용해 사용할 수 있는데, 만약 간단하게 프로젝트 구성을 하고 싶다면 Create React App 을 사용할 수 있다. 간단하게 아래의 명령어를 실행해 프로젝트를 생성할 수 있다. 

1  npx create-react-app [프로젝트 이름]

JSX

Create React App 을 사용해 프로젝트를 생성하고 파일을 확인해보면 App.js 라는 파일을 확인할 수 있다. 이 파일을 보면 return 문으로 HTML 구조처럼 생긴 코드를 반환하는데 이를 JSX 라고 한다.
JSX는 HTML과 비슷하게 사용할 수 있지만, 몇 가지 주의해야 할 점이 있다.

  1. HTML 속성 이름 대신 카멜 케이스를 사용한다. class 의 경우 className 으로, tabindex 의 경우 tabIndex 와 같이 사용한다.
  2. 최상위 요소가 하나여야한다. 만약 최상위 요소가 두 개 이상이라면 최상위 요소로 감싸주어야 한다. 이 때, 최상위 요소를 만들기 위해 불필요한 태그를 하나 사용해야 한다는 단점이 있는데 이를 위해 리액트의 Fragment를 사용하면 된다. 
    1  return (
    2      <div>첫 번째 DIV</div>
    3      <div>두 번째 DIV</div>
    4  )
    위와 같이 최상위 요소가 두 개 있을 때 <Fragment> </Fragment> 태그로 감싸거나 간단하게 <> </> 태그로 감싸면 된다.
  3. JSX에 표현식, 조건식, 반복문 등을 사용할 수 있다. JSX 내부에 중괄호를 사용해 자바스크립트 표현식을 사용할 수 있다.

컴포넌트

리액트는 화면을 구성할 때 컴포넌트라는 단위로 나누어 구성한다. 재사용 할 수 있는 컴포넌트를 만드는 게 중요한데, 이를 위해서는 UI를 추상적으로 보아야 한다. 이 과정에서 공통점을 찾는 게 재사용의 시작이라고 한다.

컴포넌트 간에 데이터를 전달하기 위해서 props 를 사용한다. 

1  // parent.js
2  const Parent = () => {
3      const [name, setName] = React.useState(0);
4      return (
5          <Child data={name}/>
6      )
7  }
8  

9  // child.js
10  const Child = (props) => {
11      return (
12          <h1>{props.data}</h1>
13      )
14  }

parent 컴포넌트에서 name 이라는 상태를 정의하고 (상태 정의는 뒷부분에서 다룸) 해당 상태를 child 컴포넌트에 data라는 이름으로 전달했다. 이 때 data와 같이 HTML 속성처럼 컴포넌트에 전달하는 것을 props 라고 한다. 자식 컴포넌트는 props라는 이름으로 객체를 받고, 그 객체 내부에는 부모 컴포넌트에서 자식 컴포넌트로 전달한 props의 이름이 들어있다.

props 의 기본값을 설정하기 위해서 defaultProps 를 사용할 수 있다.

1  [컴포넌트 이름].defaultProps = {
2      [props 이름]: [기본 값]
3  }
4  

5  // 위의 예시에서 Child 컴포넌트의 name props의 기본값을 설정하고 싶다면
6  Child.defaultProps = {
7      name: 'jeongki';
8  }

props 의 타입도 설정할 수 있는데 이때는 propTypes 를 사용한다. defaultProps와 다르게 propTypes를 사용하기 위해서는 propTypes를 가져와야 한다.

1  import PropTypes from 'prop-types';
2  

3  [컴포넌트 이름].propTypes = {
4      name: PropTypes.string
5  }

리액트 컴포넌트는 내부적으로 children 이라는 props가 있는데 이 props의 타입은 node이다. children 은 컴포넌트의 자식 컴포넌트값을 가지고 있다.

조건문, 반복문

JSX 내부에서는 if, for 문을 사용할 수 없기 때문에 표현식을 사용해야 한다. 조건문의 경우 삼항 연산자 또는 논리 연산자를 사용하고, 반복문의 경우 map, filter 등의 함수를 사용한다.

논리 연산자 단축 평가

JSX 내부에서 분기를 위해 논리 연산자를 사용한다. 논리합(||), 논리곱(&&) 연산은 왼쪽부터 오른쪽으로 평가를 진행하는데, 중간에 평가 결과가 나오면 오른쪽 끝까지 가지 않고 평가 결과를 반환해버린다. 이를 단축 평가 라고 하고, 피연산자의 타입을 변환하지 않고 그대로 반환한다. 

1  'apple' && 'banana'; // 'banana'
2  'apple' || 'banana'; // 'apple'

논리합 연산자의 경우 둘 중 하나가 true이면 true로 평가되기 때문에 왼쪽 피연산자가 true이면 바로 왼쪽의 값을 그대로 반환한다. 논리곱 연산자의 경우 둘 다 true 일 때 true를 반환하므로, 왼쪽 피연산자가 true 일 때 오른쪽 피연산자의 값을 그대로 반환한다. 단축 평가는

  1. null / undefined 체크
  2. 함수 매개변수 기본값 설정
  3. 조건부 변수값 할당

등에 사용할 수 있다.

상태관리

컴포넌트 내에 상태를 관리하기 위해서 useState 라는 훅을 사용한다.

1  const [data, setData] = React.useState(0);

useState 내에 초기 상태값을 정의할 수 있다. 위의 경우 초기값은 0이다. useState를 사용하면 상태와 해당 상태를 변경하는 함수를 구조 분해를 통해 받아올 수 있다.

useEffect

상태에 변화가 있을 때 그걸 감지해서 반응하는 훅이다. 

1  React.useEffect(() => {
2      ...
3  }, [])

useEffect의 첫 번째 파라미터로는 변화가 감지 되었을 때 어떤 행동을 할 지 함수를 전달하고, 두 번째 파라미터로는 어떤 것을 감지할 지 배열 형태로 전달한다. useEffect는 라이프사이클 훅 처럼 사용할 수도 있는데 두 번째 파라미터로 빈 배열을 전달하면 컴포넌트가 처음 로드 될 때 한 번만 실행된다. 또, useEffect 내에 return 으로 함수를 반환할 수 있는데 이 함수는 컴포넌트가 제거될 때 실행된다.

useRef

useRef 는 두 가지 목적으로 사용할 수 있다.

  1. DOM에 직접 접근하기 위해서

    1  const inputRef = React.useRef();
    2  

    3  return (
    4      <>
    5          <input ref={inputRef}/>
    6          <button onClick={() => inputRef.current.focus()}>클릭</button>
    7      </>

    버튼을 눌렀을 때 input 요소가 선택되도록 해보자. input 요소를 선택한 후 focus() 메서드를 사용하면 되는데, 그러기 위해서는 input DOM에 접근해야 한다. useRef 훅을 사용해 변수를 정의하고, 해당 변수를 접근을 원하는 요소의 ref 속성으로 설정하면 inputRef.current 와 같은 형태로 DOM 에 접근할 수 있다.

  2. 지역 변수로 사용하기 위해서 이미 앞에서 useState를 사용해 상태 변수를 설정하는 방법을 배웠다. useState의 경우 값이 변경될 때 다시 렌더링 되는데, useRef의 경우 값이 변경되더라도 다시 렌더링 되지 않는다는 차이가 있다.

정리

앞으로 리액트 배울 생각에 두근두근하다. 강사님 강의 스타일이 깊게 모든 걸 알려주시기 보다는 간단하게 알려주셔서 강의 듣고 따로 공부하는 시간이 필요할 것 같다. 강의 빠르게 듣고 하루에 3시간 정도는 강의 내용 외에 따로 공부하는 시간을 가지는 게 좋을 것 같다.

참고자료

[자바스크립트] 논리연산자(&&, ||) 단축 평가 curryyou.tistory.com/193
https://react.vlpt.us/basic/12-variable-with-useRef.html

Loading script...
copyright 2021-2022. Jeongki.dev