728x90 728x90 전체 글153 Uncaught TypeError: Class extends value #<Object> is not a constructor or null 오류 Uncaught TypeError: Class extends value # is not a constructor or null 오류 문제 상황 함수형 컴포넌트를 클래스형 컴포넌트로 바꾸는 과정에서 다음과 같은 오류가 발생했다. ⚠️Uncaught TypeError: Class extends value # is not a constructor or null 잘못된 코드 import Component from "react"; class User extends Component { render() { return {this.props.name}; } } // const User = (props) => { // return {props.name}; // }; export default User 문법 상의 문제는.. 2023. 1. 26. React useReducer 개념 및 사용 방법 React useReducer 개념 및 사용 방법 useReducer 개념 useReducer는 state 관리를 도와주는 hook으로 useState와 약간 비슷하다. 하지만 더 많은 기능이 있고 더 복잡한 state에 특히 유용하다. 예를 들어 여러 state들이 함께 속해 있는 경우, 여러 state가 같이 바뀌거나 서로 관련된 경우useState에서 얻은 state는 종종 사용 및 관리가 어려워지거나 오류가 발생하기 쉽다. 이런 더 강력한 state 관리가 필요한 경우 useReducer를 useState 대신 쓸 수 있다. 하지만 그렇다고 해서 항상 useReducer를 사용해야 한다는 건 아니며 더 강력하다고 해서 항상 더 좋다고 할 수는 없다. 사용하기 조금 더 복잡하기 때문에 조금 더 설정.. 2023. 1. 25. React Side Effects와 useEffect React Side Effects와 useEffect Side Effects란 리액트 앱의 컴포넌트의 주요 역할은 UI를 렌더링하는 것이다. state나 event, 그 모든 것의 주요 역할은 화면에 무언가를 가져오는 것이었다. 예를 들어 버튼이 클릭 되거나 어떤 텍스트가 입력되는 특정 이벤트에 따라 따라서 화면에 보이는 것은 변경될 수 있고 이것이 리액트가 애플리케이션에서 주로 하는 일이다. 사이드이펙트는 애플리케이션에서 일어나는 다른 모든 것을 뜻한다. 예를 들면 http request, local storage에 저장, timer설정 등 이것 들은 모두 애플리케이션에서 고려해야 하는작업이지만 화면에 무언가를 가져오는 것과는 관련이 없다. 그것은 리액트가 신경써야할 것이 아니고 그런 일을 하려고 리액.. 2023. 1. 24. React useRef 개념 및 사용법 React useRef 개념 및 사용법 ref는 참조를 뜻하며 리액트에서는 참조(reference)를 줄여 ref라고 부른다. 가장 기본적인 기능은 다른 DOM 요소에 접근해서 그것들로 작업할 수 있게 해주는 것이다. return ( username age Add User ); 이 코드의 input 에서는 사용자가 입력한 내용을 관리한다. 매번 키를 누를 때마다 state가 업데이트되고 그 state를 인풋에 다시 넘겨준다. 그리고 그 state를 사용하여 인풋을 재설정하고 데이터가 필요한 곳으로 보내기도 한다. 이렇게 관리해도 좋지만 폼을 제출할 때만 필요한데도 키를 입력할 때마다 state를 업데이트한다는 건 약간 과하다. 이 경우 ref를 사용할 수 있다. import {useRef} from "r.. 2023. 1. 22. React Portals 개념과 사용법 React Portals 개념과 사용법 return ( ); 이 코드에서는 좋지 않은게 하나 있는데 바로 모달이다. DOM에 렌더링되는 모달은 엄밀히 말하면 작동은 한다. 제대로 스타일링 하기만 하면 모달처럼 보일 것이다. 그러나 의미적인 관점이나 간결한 HTML 구조를 갖췄는지의 관점으로 보면 별로 좋지 않다. 왜냐하면 기본적으로 모달은 페이지 위에 표시되는 오버레이이기 때문이다. 모달은 전체 페이지에 대한 오버레이이고 따라서 다른 모든 것 위에 있다. 때문에 스타일링이나 접근성의 관점에서 문제가 생길 수 있다. 예를 들어 스크린 리더가 렌더링되는 HTML 코드를 해석할 때 이걸 일반적인 오버레이라고 인식하지 못할 수도 있다. 따라서 이 모달이 다른 모든 내용에 대한 오버레이인지 명확하지 않다. 이것은.. 2023. 1. 21. React Fragments 개념과 사용법 React Fragments 개념과 사용법 리액트에서는 JSX로 작업하며 JSX는 컴포넌트에서 반환하는 코드이다. 리액트는 이 코드를 실제 DOM으로 렌더링한다. 하지만 JSX에는 제한 사항이 있다. 루트 수준에서 JSX 요소들이 인접해 있으면 오류가 발생한다. 리액트에서 일반적으로 루트 JSX 요소는 1개여야 한다. 이것은 유효한 자바스크립트 문법이 아니기 때문이다. 자바스크립트에서는 둘 이상의 값을 반환 할 수 없다. JSX 코드는 리액트 createElement를 통해서 변환되며 단 1번의 createElement 호출만 반환 되어야 한다. 이 문제를 해결하기 위해서는 2가지 방법이 있다. 1. 요소 배열 반환 첫 번째로는 반환하고자 하는 요소들을 배열로 만들어서 요소 배열을 반환하는 방법이다. 하.. 2023. 1. 20. 이전 1 ··· 21 22 23 24 25 26 다음 728x90 728x90
