Miracle Morning, LHWN

# 만일 React 앱에서 에러가 발생한다면 아래와 같은 에러 페이지가 노출된다. 다만, 이 화면은 개발 환경에서만 보여지는 화면이고 실제 사용자에게 보여지는 화면을 보려면 우측 상단의 X 버튼을 클릭하면 된다. 아래 화면처럼 실제 사용자들에게는 빈 페이지만 노출되어 더욱 당황스럽게 할 것이다. Null Checking props 로 전달되는 user 가 존재하지 않는 경우를 분리하여 null 을 렌더링해주는 것이다. function User({ user }) { if (!user) { return null; } return ( ID: {user.id} Username: {user.username} ); } 이렇게 Null Checking 을 해주면 빈 페이지가 노출되는 것은 동일하지만, 에러는 발생하지..

# LifeCycle Method : 컴포넌트가 브라우저에 나타나고, 업데이트되고, 사라질 때, 에러가 났을 때 호출되는 메서드들 → 클래스형 컴포넌트에서만 사용할 수 있다. (useEffect 랑 비슷) # 마운트 될 때의 생명주기 - constructor : 컴포넌트의 생성자 메서드. 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드 - getDerivedStateFromProps : props 로 받아온 것을 state 에 넣어주고 싶을 때 사용 - render : 컴포넌트를 렌더링하는 메서드 - componentDidMount : 컴포넌트의 첫 번째 렌더링이 마치고 나면 호출되는 메서드. 호출되는 시점에는 컴포넌트가 이미 화면에 나타난 상태 ​ # 업데이트 생명주기 - getDerivedStateF..

# 최근에는 클래스형 컴포넌트를 잘 사용하지 않는 추세이지만, 예전에 만들어진 리액트 관련 라이브러리는 Hooks 지원이 안되는 경우도 있고 react-native 관련 라우터 라이브러리 react-native-navigation 의 경우에도 클래스형 컴포넌트를 써야하는 경우가 있다. 따라서 클래스형 컴포넌트도 알고 있으면 도움은 된다. ​ 우선, 함수형 컴포넌트 예시를 보자. import React from 'react'; function Hello({ color, name, isSpecial }) { return ( {isSpecial && *} 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' }; export default Hello; 이를 클래스형 ..

React 에서 배열/객체를 업데이트 할 때에는 직접 수정하면 안되고, 불변성을 지켜주면서 업데이트 해야한다. // 좋지 않은 방법 const object = { a: 1, b: 2 }; object.b = 3; // 좋은 방법 const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3, }; 경우 (O) 좋은 방법 (O) (X) 좋지 않은 방법 (X) 항목 추가 concat push () 항목 제거 filter splice () 항목 수정 map n 번째 항목 직접 수정 # posts 배열 안의 id 가 1인 post 객체를 찾아서 comments 에 새로운 댓글 객체를 추가해주는 경우 const nextState = { ...state, ..

# 리액트 프로젝트에서 발생할 수 있는 이런 상황을 상상해보자. ​ 특정 함수들을 구현했는데 이를 사용하기 위해서 3-4개 이상의 컴포넌트를 거쳐 props 를 통해 전달되어야 한다면 매우 번거로울 것이다. (컴포넌트 1개 정도 거치는건 괜찮을 것 같다.) ​ 이럴 때에 Context API + dispatch 를 함께 사용하면 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리할 수가 있다. ContextAPI 로 Context 만들기 : React.createContext() const UserDispatch = React.createContext(null); createContext 함수의 파라미터는 Context의 기본 값(Context 를 쓸 때 값을 아무것도 지정하지 않을 경우 사용)이다. ..

useState : 상태를 관리 컴포넌트에서 가변적인 상태를 지니고 있을 때, 상태를 관리하고 싶을 때 사용한다. const [value, setValue] = useState(0); 이 함수가 호출되고 나면 배열을 반환하는데, 첫 번째 원소는 상태 값이고, 두 번째 원소는 상태를 설정하는 함수이다. useEffect : 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 # useEffect 는 기본적으로 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터에 무엇을 넣느냐에 따라 실행 조건이 달라진다. (1) 마운트 될 때만 실행하고 싶으면, 두 번째 파라미터로 비어있는 배열을 넣어준다. (2) 특정 값이 변경될 때만 호출하고 싶으면, 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣..

# 컴포넌트를 만드는 과정에서 반복되는 로직이 발생하기 마련이다. 이럴 때에는 Custom Hook 을 만들어서 반복되는 로직을 쉽게 재사용한다. 구현하는 방법은 Hook 파일 안에서 useState/useEffect/useReducer/useCallback 등 Hooks 를 사용해서 원하는 기능을 구현하고 컴포넌트에서 사용하고 싶은 값들을 반환해주면 된다. ​ (1) src/hooks 디렉터리를 만들어서 따로 분리해준다. (2) use 라는 키워드로 시작하는 파일을 만든다. ex) useInputs.js (3) useState/useEffect/useReducer/useCallback 등 Hooks 를 사용해서 원하는 기능을 구현한다. ​ 예시로 useInputs.js 를 구현해보자 import { u..

# 상태를 업데이트하는 방법에는 useState, useReducer가 있다. 다만, useReducer Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트로부터 분리시킬 수 있다. (컴포넌트 밖, 다른 파일에서도 사용할 수 있다.) reducer 란 reducer 는 현재 상태(state)와 액션 객체(action)를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 function reducer(state, action) { // 새로운 상태를 만들어주는 로직 // const nextState = ... return nextState; } reducer 에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 된다. action 에는 업데이트를 위한 정보를 가지고 있다. 주로 'type'..

# React.memo 를 이용하면, 컴포넌트의 props 가 바뀌지 않았을 때 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있다. → 리렌더링이 필요한 상황에서만 하도록 설정할 수 있는 것이다! // CreateUser.js import React from 'react'; const CreateUser = ({ username, email, onChange, onCreate }) => { return ( ... export default React.memo(CreateUser); // UserList.js import React from 'react'; const User = React.memo(function User({ user, onRemove, onToggle }) { retu..

# useCallback은 useMemo 와 비슷한 Hook 인데 useMemo는 특정 결과 값을 재사용, useCallback은 특정 함수를 새로 만들지 않고 재사용하는데에 사용된다. const onCreate = () => { const user = { id: nextId.current, username, email }; setUsers(users.concat(user)); setInputs({ username: '', email: '' }); nextId.current += 1; }; const onRemove = id => { // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬 // = user.id 가 id 인 것을 제거함 setUsers(users.filter(..