Day31
Day 31
React 소개
React란 무엇인가?
- facebook에서 만들었음.
- 2013년 5월에 오픈소스로 공개됨.
React의 특징
- 상태를 관찰하고 변화가 발생할 경우 연관된 곳에서 연산이 수행된다.
- MVC에서 view만을 관리하는 library이다.
컴포넌트
- 컴포넌트는 여러 요소를 담을 수 있다.(HTML, Style, JavaScript, Event, State)
- 컴포넌트는 트리 구조로 구성할 수 있다.
- react는 컴포넌트의 조합으로 view를 구성한다.
Virtual DOM
- 코드로 dom 트리를 표현한 것이다.
- 필요한 부분만 한 번에 렌더링한다.
- 성능보다는 개발을 편하게 할 수 있도록 도입했다.
React를 공부하는 방법
- React는 Library이다.
- React를 구성하는 기능들은 최소한의 노력으로 최대의 효율을 내기 위해 존재한다.
- 처음엔 컴포넌트만 열심히 생각해본다.
React의 필수 요소들
- Context API
- 컴포넌트 구성 방법
- 부모로 이벤트 넘기는 방법
- 자식 컴포넌트를 제어하는 방법
- react-portal
위 다섯가지 요소들을 가지고 잘 조합해서 내게 필요한 컴포넌트를 만들어서 웹사이트를 구현하면 된다.
create-react-app, jsx
create-react-app
- react로 app을 만들 수 있는 가장 빠른 방법
jsx
- react내에서 쓰는 문법
- 조건
- 주로 삼항 연산자를 사용한다.
- 표현식
{}를 사용하여 표현식을 사용한다.
- 반복
- map을 사용하여 표현식을 반복해서 출력할 수 있다.
React 배우기 (1) : 컴포넌트
- 컴포넌트는 함수를 구성하는 것으로 간단히 만들 수 있다.
- 클래스를 이용하여 컴포넌트를 만들었지만 react버전이 높아지면서 함수로 컴포넌트를 만드는 것이 권장되었다.
- UI를 추상적으로 바라보고 공통점을 찾아서 컴포넌트를 재사용한다.
- 컴포넌트 분류 방법은 너무 깊게 고민하지 않는다.
- 도메인
- 역할
- 크기
- atomic-design(https://kctier.so/posts/effective-atomic-design)
- react의 컴포넌트 = 함수
- 컴포넌트는 화면에 보여주는 JSX를 반환하는 함수
- class보다는 함수로 component를 만드는 것을 권장
- 컴포넌트에
defaultProps를 이용하여 기본값을 설정할 수 있다. - 컴포넌트에
propTypes를 이용하여 자료형을 제한할 수 있다. - props를 넘길 때 비구조화 할당을 이용하여 조금 더 간단하게 구현할 수 있다.
props -> { size = 200 }defaultProps를 이용하지 않아도 기본값을 정의할 수 있다. PropTypes.node는 React Element 및 jsx를 받을 수 있는 타입이다. 만약 반드시 받아야 하는 요소는.isRequired를 이용하여 지정할 수 있다.
React 배우기 (2) : 분기와 반복
- JSX내에서는 오로지 표현식만 적을 수 있기 때문에 if나 반복문을 사용할 수 없다.
{}내에condition && todo...방식을 사용하여 if문을 대체하여 쓸 수 있다. if-else문은 삼항연산자로 대체하여 쓸 수 있다.map이나filter와 같은 고차원함수를 이용하여 요소들을 반복적으로 사용할 수 있다. 이때 각 요소들에는 key라는 속성을 부여하여 각각의 요소들을 구분하여 해당 요소를 재사용이 가능하도록 해야한다.
React 배우기 (3) : useState
- 훅을 이용해서 컴포넌트의 상태를 관리하고 이벤트 바인딩하는 방법을 배운다.
- Counter 컴포넌트를 구현하기
- 모든 Counter 컴포넌트의 합을 구하기
- 배우는 것들
- 컴포넌트에서 지역 상태를 관리하는 법 :
useState를 사용한다. - 컴포넌트에 이벤트 바인딩하기 : 이벤트 핸들 함수를 선언해주고 태그 안쪽에서 이벤트 바인딩을 통해 해당 함수를 실행시켜줄 수 있다.
- 부모 컴포넌트에 메세지 전달하기 : 컴포넌트에서 props를 통해 함수를 전달한다. or
evnet busorreduxorrecall등을 사용할 수 있다.
- 컴포넌트에서 지역 상태를 관리하는 법 :
React 배우기 (4) : useEffect
- 무언가 변화가 있을 때 감지하여 반응하는 훅
- 첫 번째 파라미터가 반응하는 부분
- 두 번째 파라미터는 어떤 것을 감지할 지 리스트로 받을 수 있다.
- life-cycle처럼 사용할 수도 있다.
- 두 번째 파라미터에 아무값도 넣지 않으면 Component가 load될 때 반응하게 된다. 전역적으로 훅을 건다.
- 전역적으로 훅을 걸었다면 다 쓰고 나서(컴포넌트가 제거될 때) 반드시 해제를 해줘야만 한다.
- useEffect에서 return을 하게 되면 컴포넌트가 제거될 때 실행이 된다.
React 배우기 (5) : useRef
- useRef는 DOM에 직접 접근할 때 사용한다.
- 지역 변수로 사용할 때 사용할 수 있다. useState와 큰 차이점이 존재한다.
- useState는 값이 변경될 때 다시 렌더링을 한다.
- useRef는 값이 변경되더라도 다시 렌더링을 하지 않는다.
useRef(initialValue)를 통해 ref객체를 하나 생성하고 해당 객체내에 current 속성을 통해 해당 값에 접근할 수 있다. 만약 initialValue가 지정되어 있다면 해당 자료형을 따라간다. 하지만 어떤 기본 tag element의 ref속성에 전달된다면 해당 요소의 DOM이 자료형이 되어서 style같은 속성들 뿐만 아니라focuse()나click()같은 action도 조작할 수도 있다.- 기본 tag element의 ref속성에 전달뿐만 아니라 Component의 요소에도 전달해줄 수 있다.
React.forwardRef((props, ref) => {})를 이용하여 ref를 Component에게도 전달해줄 수 있다. - Fragment 사용 이유
사용사례 (1) : Pagination
- 페이지네이션은 페이지의 번호리스트와 번호에 따른 내용 게시물을 보여주는 기법이다.
React 배우기 (6) : React component의 스타일 적용 방법
- .css 파일을 적용
- Inline style을 적용
- JS library를 이용하여 스타일 코드를 적용
- Fragma - compiler에게 이 파일을 어떻게 처리할지를 알리는 것!
React 배우기 (7) : useMemo
- 함수 컴포넌트는 자신의 상태가 변경될 때 리렌더링된다.
- 부모 컴포넌트로부터 받는 prop이 변경될 때 리렌더링된다.
-
부모 컴포넌트의 상태가 변경되면 리렌더링된다.
- 최적화를 위해서 필요한 훅
- 만약 연산의 속도가 느린 컴포넌트라면 또다시 렌더링하지 않기 위해서 useMemo를 사용할 수 있다.
-
꼭 최적화가 필요없더라도 useMemo를 사용하여 컴포넌트들을 관리하면 좋다.
- ex)
const result = useMemo(() => sum(n), [n]);