728x90 728x90 분류 전체보기153 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 ··· 33 34 35 36 37 38 39 다음 728x90 728x90
