⚛️ 기본 환경: IDE: VS code, Language: React

 

 

발생 Error

React에서 다음 Source Code를 실행할 경우,

1
2
3
4
5
6
7
8
9
10
  return (
    <AuthContext.Provider>
      <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </AuthContext.Provider>
  );
 
 
  

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const Navigation = (props) => {
  return (
    <AuthContext.Consumer>
      {(ctx) => {
        return (
          <nav className={classes.nav}>
            <ul>
              {ctx.isLoggedIn && (
                <li>
                  <a href="/">Users</a>
                </li>
              )}
            </ul>
          </nav>
        );
      }}
    </AuthContext.Consumer>
  );
};
 
 
  

🚨 다음과 같은 오류 발생

TypeError: Cannot read properties of undefined (reading 'isLoggedIn')

 

 

발생 원인

React.createContect()에서 기본값 설정 시, Provider 객체를 사용

 

 

해결 방법

1. Provider를 사용하지 않고 기본값 설정

1
2
3
4
5
6
7
8
9
10
  return (
    <Fragment>
      <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </Fragment>
  );
 
 
  

 

2. value prop을 통한 객체 전달

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  return (
    <AuthContext.Provider
      value={{
        isLoggedIn: false,
      }}
    >
      <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </AuthContext.Provider>
  );
 
 
  

 

⭐ 기본값이 있을 경우, Provider는 필요없으나 context에 선언된 객체값이 변하며 해당 값을 다른 Component와 공유하고자 할 경우 Provider 선언이 필요

▶ 기본값이 있으나 값의 변화가 있을 예정이어 Provider를 사용해야할 때는 value prop을 사용하여 기본값을 직접 전달

 

저작자표시 (새창열림)

'JavaScript > React with Error' 카테고리의 다른 글

[해결 방법] React Hook "useState" cannot be called inside a callback  (0) 2023.06.03
[해결 방법] React Hook "useState" is called in function "emailReducer" that is neither a React function component nor a custom React Hook function  (0) 2023.06.03
[해결 방법] Encountered two children with the same key  (0) 2023.06.01
[해결 방법] A complete log of this run can be found in:  (0) 2023.05.24
[해결 방법] TypeError: Cannot read property 'rating' of undefined  (0) 2023.05.21

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

React.useReducer()

: 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수

: 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있음

 

useReducer() 의 사용법

1
2
const [state, dispatch] = useReducer(reducer, initialState);
 
 
  

 

 - state: 컴포넌트에서 사용 할 수 있는 상태

 - dispatch: 액션을 발생시키는 함수

▶ 예: dispatch({ type: 'INCREMENT' })

 - reducer: reducer 함수

 - initialState: 초기 상태

 

1. useReducer() 선언

1
2
3
4
5
  const [emailState, dispatchEmail] = useReducer(emailReducer, {
    value: '',
    isValid: null,
  });
 
 
  

 

2. emailReducer() 선언

1
2
3
4
5
  const [emailState, dispatchEmail] = useReducer(emailReducer, {
    value: '',
    isValid: null,
  });
 
 
  

 * state = emailState

 * action = dispatchEmail()이 전달한 객체

 

 

3. dispatchEmail 선언을 통한 emailReducer() 호출

1
2
    dispatchEmail({type: 'USER_INPUT', val: event.target.value});
 
 
  

 

4. 호출된 emailReducer()에 dispatchEmail()을 통해 전달받은 데이터를 통한 로직 구현

1
2
3
4
5
6
7
8
9
const emailReducer = (state, action) => {
 
  if(action.type === 'USER_INPUT'){
    return {value : action.val, isValid: action.val.includes('@')};
  }
 
  return {value: '', isValid: false};
};
 
 
  

 

5. useReducer() 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const Login = (props) => {
  const [emailState, dispatchEmail] = useReducer(emailReducer, {
    value: '',
    isValid: null,
  });
  const emailChangeHandler = (event) => {
    dispatchEmail({type: 'USER_INPUT', val: event.target.value});
    setFormIsValid(
      event.target.value.includes('@') && enteredPassword.trim().length > 6
    );
  };
  const validateEmailHandler = () => {
    dispatchEmail({type: 'INPUT_BLUR'});
    
  };
  const submitHandler = (event) => {
    event.preventDefault();
    props.onLogin(emailState.value, enteredPassword);
  };
  return (
    <Card className={classes.login}>
      <form onSubmit={submitHandler}>
        <div
          className={`${classes.control} ${
            emailState.isValid === false ? classes.invalid : ''
          }`}
        >
          <label htmlFor="email">E-Mail</label>
          <input
            type="email"
            id="email"
            value={emailState.value}
            onChange={emailChangeHandler}
            onBlur={validateEmailHandler}
          />
        </div>
      </form>
    </Card>
  );
};
 
 
  

 

⭐ 컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조가 복잡해진다면 useReducer로 관리하는 것이 편함

 

 

 

참고 자료

 

20. useReducer 를 사용하여 상태 업데이트 로직 분리하기 · GitBook

20. useReducer 를 사용하여 상태 업데이트 로직 분리하기 이 프로젝트에서 사용된 코드는 다음 링크에서 확인 할 수 있습니다. useReducer 이해하기 우리가 이전에 만든 사용자 리스트 기능에서의 주

react.vlpt.us

 

저작자표시 (새창열림)

'JavaScript > React' 카테고리의 다른 글

[ReactJS_Complete] How Redux Works  (0) 2023.06.04
[ReactJS_Complete] React.createContext()  (0) 2023.06.03
[ReactJS_Complete] React.useEffect()  (0) 2023.06.03
[ReactJS_Complete] React.useRef()  (0) 2023.06.01
[ReactJS_Complete] ReactDOM.createPortal()  (0) 2023.06.01

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

React.useEffect()

: 모든 컴포넌트가 렌더링된 이후 특정 작업을 실행시켜주는 Hook

: HTTP request, Browser 저장소에 저장 등 sideEffect를 처리

 

* useEffect(function, dependencies)

 - function: 수행하고자하는 작업

 - dependencies: 의존성 배열, 업데이트를 의존시키고 싶은 값 설정

 

 

1. useEffect(function)

: Rendering시마다 실행

 

2. useEffect(function, [])

: Component를 첫 rendering 시에만 실행

1
2
3
4
5
6
  useEffect(() => {
    setFormIsValid(
      enteredEmail.includes('@') && enteredPassword.trim().length > 6
    );
  }, []);
 
 
  

❌ 올바른 입력값 형식에도 불구하고, 첫 rendering에만 useEffect()가 실행되므로 Login Btn이 활성화되지 않음

 

3. useEffect(function, [dependencies])

: dependencies에 선언된 변수값이 변할 때마다 rendering

1
2
3
4
5
6
  useEffect(() => {
    setFormIsValid(
      enteredEmail.includes('@') && enteredPassword.trim().length > 6
    );
  }, [enteredEmail, enteredPassword]);
 
 
  

⭐ 단, 함수를 추가할 경우, function()으로 작성하면 결과값이 의존성에 추가되므로 function으로 작성하여 함수 자체를 의존성에 추가해야 함

 

4. setTimeout(() => {}, sec)

: 어떤 함수를 실행하기 전에 sec만큼 대기

1
2
3
4
5
6
7
8
9
10
  useEffect(() => {
    setTimeout(() => {
      console.log('Checking Form Validation');
      setFormIsValid(
        enteredEmail.includes('@') && enteredPassword.trim().length > 6
      );  
    }, 500); // 0.5s씩 지연되어 setFormIsValid 실행
 
  }, [enteredEmail, enteredPassword]);
 
 
  

 

5. cleanUp function

: return () => {]

: 첫번째 useEffect()가 실행되고 난 이후, useEffect 함수가 다시 실행되기 전에 실행

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log('Checking Form Validation');
      setFormIsValid(
        enteredEmail.includes('@') && enteredPassword.trim().length > 6
      );  
    }, 500); // 0.5s씩 지연되어 setFormIsValid 실행
 
    return () => {
      console.log('CLEANUP');
      clearTimeout(identifier);
    };
 
  }, [enteredEmail, enteredPassword]);
 
 
  

⭐ cleanUp 함수를 통해서 setFomisVallid가 0.5초 뒤에 실행되지 전에 timer를 초기화시켜서 과도하게 formIsValid가 실행되는 것을 방지할 수 있음

⭐⭐ [dependencies] 값을 유효성 검사를 충족시켰는지 여부에 따른 변수로 선언 시 useEffect() 호출을 줄일 수 있음

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  const {isValid: emailIsValid} = emailState;
  const {isValid: pwdIsValid} = pwdState;
  // 객체 destructuring (value, alias)
 
  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log('Checking form validity!');
      setFormIsValid(
        emailIsValid && pwdIsValid
      );
    }, 500);
 
    return () => {
      console.log('CLEANUP');
      clearTimeout(identifier);
    };
  }, [emailIsValid, pwdIsValid]);
 
 
  

 

 

 

참고 자료

 

React Hooks : useEffect() 함수

useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을

xiubindev.tistory.com

 

저작자표시 (새창열림)

'JavaScript > React' 카테고리의 다른 글

[ReactJS_Complete] React.createContext()  (0) 2023.06.03
[ReactJS_Complete] React.useReducer()  (0) 2023.06.03
[ReactJS_Complete] React.useRef()  (0) 2023.06.01
[ReactJS_Complete] ReactDOM.createPortal()  (0) 2023.06.01
[ReactJS_Complete] <div> Soup  (1) 2023.06.01

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

React.useRef()

: .current프로퍼티에 변경 가능한 값을 담고 있는 상자와 유사

 * 특정 DOM 선택 시 사용

= JavaScript에서의 특정 DOM 을 선택하는 getElementById, querySelector 같은 DOM Selector 함수와 같은 역할

 * Rerendering 방지

 = useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않음

 

 

useRef() 설정

1. useRef import

1
2
import React, { useState, useRef } from "react";
 
 
  

 

2. 변수에 useRef() 할당

1
2
3
4
5
  const nameInputRef = useRef();
 
console.log(nameInputRef); // {current: input#username}
  const enteredNameRef = nameInputRef.current.value; // Max: input에 입력한 값
 
 
  

(nameInputRef tag에 사용 후, 값 출력 가능)

 

3. useRef 사용

1
2
<input id="username" type="text" ref={nameInputRef} />
 
 
  

 

⭐ useRef를 사용할 경우, 간결한 코드로 빠르게 값을 읽어올 수 있음

단, React에 의해 제어되지 않으므로 Uncontrolled Component가 됨

 = useRef는 단순히 input 태그에 입력된 값을 가져오기만 하고 값을 주입하지 않음

⭐ useState를 사용할 경우, 태그와 값을 주고받을 수 있음

React에 의해 제어되므로 Controlled Component가 됨

 = useState는 input 태그의 초기값을 설정해주고 함수를 통해서 값을 변경 및 설정함

 

 

 

참고 자료

 

Hooks API Reference – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

 

 

[ReactJS_Complete] Controlled Component, Uncontrolled Component

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다. ⚛️ 기본 환경: IDE: VS code, Language: React 1. Controlled Component : 사용자의 입력을 기반으로 state를 관리하

hj0216.tistory.com

 

저작자표시 (새창열림)

'JavaScript > React' 카테고리의 다른 글

[ReactJS_Complete] React.useReducer()  (0) 2023.06.03
[ReactJS_Complete] React.useEffect()  (0) 2023.06.03
[ReactJS_Complete] ReactDOM.createPortal()  (0) 2023.06.01
[ReactJS_Complete] <div> Soup  (1) 2023.06.01
[ReactJS_Complete] JSX Limitations & Workarounds  (0) 2023.06.01

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

ReactDOM.createPortal()

: 렌더링하려는 HTML 요소를 다른 장소로 이동

 

⭐ Modal 창 등을 root Component와 구분하여 관리

 

사용 방법

1. ReactDOM import

1
2
import ReactDOM from "react-dom";
 
 

react-dom: React의 기능을 Web browser에서 사용하기 위해 import 

= 웹브라우저에 대한 React용 어뎁터의 일종

 

2. 이동하고자하는 Component 선언

1
2
3
4
const Backdrop = (props) => {
  return <div className={classes.backdrop} onClick={props.onConfirm} />;
};
 
 
  

 

3. ReactDOM.createPortal() 사용

{createPortal(이동시키고자하는 Component, 이동하고자하는 위치의 요소 id)}

1
2
3
4
5
6
7
8
9
10
11
const ErrorModal = (props) => {
  return (
    <React.Fragment>
      {ReactDOM.createPortal(
        <Backdrop onConfirm={props.onConfirm} />,
        document.getElementById("backdrop-root")
      )}
    </React.Fragment>
  );
};
 
 
  

* document

: React는 Single Page Application을 권장하며 모든 JS파일이 index.html에 import 됨

파일은 여러개일지라도 실제 html 페이지는 1개 = index.html이며, document는 곧 index.html을 의미

→ index.html에서 root 컴포넌트와 분리하여 관리하고 싶은 요소들을 위한 태그 생성

 

4. index.html에 이동시키고자하는 위치 지정

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="backdrop-root"></div>
    <div id="root"></div>
  </body>
</html>
 
 
  

 

 

 

참고 자료

 

createPortal – React

The library for web and native user interfaces

react.dev

 

저작자표시 (새창열림)

'JavaScript > React' 카테고리의 다른 글

[ReactJS_Complete] React.useEffect()  (0) 2023.06.03
[ReactJS_Complete] React.useRef()  (0) 2023.06.01
[ReactJS_Complete] <div> Soup  (1) 2023.06.01
[ReactJS_Complete] JSX Limitations & Workarounds  (0) 2023.06.01
[ReactJS_Complete] Conditional Styling  (0) 2023.06.01

티스토리툴바