차근차근 배움터

지난 번에 ref를 이용한 파일을 완성 import "./UserForm.css"; import { useState, useRef } from 'react'; import Card from './UI/Card'; import Button from "./UI/Button"; import ErrorModal from "./UI/ErrorModal"; import Wrapper from '../Helpers/Wrapper'; const UserForm = (props) => { const nameInputRef = useRef(); const ageInputRef = useRef(); const [userName, setUserName] = useState(""); const [userAge, setUserA..

ref는 매우 강력한 도구로 가장 기본적인 기능은 다른 DOM 요소에 접근해서 그것들로 작업할 수 있게 해주는 것이다 폼을 제출할 때만 필요한데도 키를 입력할 때마다 state를 업데이트한다는 건 약간 과한 것 같지 않은가? 이럴 때 ref 를 사용할 수 있다. useRef 훅을 사용해보자 모든 리액트 훅과 마찬가지로, useRef도 함수형 컴포넌트 안에서만 사용가능합니다 useRef도 초기화하려는 기본값이 필요하다 제가 관심있는 건 무엇을 반환하는지입니다 왜냐하면 나중에 해당 ref와 작업할 수 있게 해주는 값을 반환하기 때문입니다 즉 요소에 연결하여 해당 요소와 작업할 수 있게 해주는 거죠 컴포넌트 안에 이렇게 useRef 훅을 이용해서 const 변수를 하나 생성하고 ref를 HTML 요소에 연결하..

ErrorModal 컴포넌트에서 React.Fragment를 사용할 수 있지만 또 Portal을 사용할 수 있다. 왜냐하면 이 모달 전체가 렌더링 되는 곳에 실제로 렌더링 되어서는 안되기 때문이다. 포털에는 두 가지가 필요하다 컴포넌트를 이동시킬 장소가 필요하고 그런 다음 컴포넌트에게 그 곳에 포털을 가져야 한다고 알려줄 필요가 있다 이제 그 장소를 표시하기 위해 public 폴더로 가자 public 폴더 내 index.html body 태그 내부에 두 가지 div 를 생성한다. 리액트와 함께 제공되는 다른 라이브러리 즉 react-dom 라이브러리에 정의되어 있습니다 리액트는 일종의 라이브러리라고 생각할 수 있습니다 모든 리액트 기능, state 관리 애드온, 베이크 인 등이 있는 라이브러리요 그리고 ..

프래그먼트를 사용하면 더 깔끔한 코드를 작성할 수 있다. 최종 페이지에 불필요한 HTML 요소들이 줄어든다 또 다른 비슷한 기능을 가진 유용한 기능으로는 리액트 포털이 있다. 이것 역시 더 간결한 코드를 작성하는 데 도움이 됩니다. 위 코드에서 어떤 문제가 있을까? 모달 창이 스타일링만 잘 하면 나쁘지 않지만 의미적인 관점에서 별로 좋지 않다. 기본적으로 Modal은 페이지 위에 표시되는 overlay 인데, 즉 다른 모든 것들 위에 존재한다. 따라서 이것이 다른 HTML과 중첩되어 있다면 기술적으론은 스타일링 덕분에 잘 작동할 지 몰라도 좋은 코드라고 말할 수는 없다. 좋은 구조도 아니다. 스타일링이나 접근성의 관점에서 문제가 생길 수 있다 그러나 실제 DOM에서 이것을 다르게 렌더링하면 즉, 모달 H..

하지만 이 Wrapper 컴포넌트는 리액트에서 제공되기 때문에 직접 만들 필요가 없다 프래그먼트 컴포넌트로, React.Fragment로 접근할 수 있다 프로젝트 설정이 지원한다면 아래와 같이 빈 태그를 이용할 수도 있다 이게 마음에 들지 않거나 작동하지 않는다면 아래와 같이 항상 사용할 수 있다 아래와 같이 직접 임포트할 수도 있다 일반적으로는 이렇게 Fragment를 이용하고 Wrapper 컴포넌트를 사용하지 않는다 내부에서 어떻게 작동하는 지를 보여주기 위해서 Wrapper를 설명했다.

components 폴더 하위에 Helpers 라는 폴더를 만들고 Wrapper.js 파일을 생성한다 const Wrapper = props => { return props.children; } export default Wrapper; 그리고 Wrapper.js 파일에 위와 같이 props.children을 통해서 컴포넌트들을 그대로 반환한다. 그리고 UserForm.js에서 Wrapper.js를 import하고 import Wrapper from '../Helpers/Wrapper'; 아래 return 문에서 return ( {error && } Username Age (Years) Add User ); div 대신 Wrapper로 감싸줄 수 있다 return ( {error && } Username..

JSX는 컴포넌트에서 반환하는 코드입니다 리액트는 이 코드를 실제 DOM으로 렌더링합니다 이것이 바로 JSX입니다 JSX의 한계는 이렇게 루트 JSX 요소에는 하나의 요소만 반환해야 하는 한계가 있다. 이를 해결하는 방법으로 div로 감싸는 해결방법이 있었는데 div 대신 네이티브 자바스크립트 배열을 사용할 수도 있다 하지만 이 경우에도 배열은 key 값을 필요로 하게 된다 이러한 문제들 때문에 사실 의미가 없는 구조적인 의미조차 갖지 않는 div 태그들이 많이 존재할 수 있다 지금은 괜찮지만 나중에는 css 스타일링을 망칠 수도 있다 스타일링에 지장을 주지 않더라도 좋은 관행은 아니다 너무 많은 HTML 요소를 렌더링하게 되면 궁극적으로는 어플리케이션이 느려질 것이다 브라우저는 모든 요소들을 렌더링해야..

이 모듈에서는 프래그먼트, 포털, ref 에 대해 알아보겠다 이것들은 더 많은 문제를 해결하게 도와주는 리액트 도구들이다 이 모듈에서는 다양한 기능에 대해 간단히 살펴본다 이 도구들로 어떤 문제를 해결할 수 있는지 왜 필요한지, 어떻게 사용하는지 배운다. JSX 코드에서 찾을 수 있는 제한 사항들도 살펴보고, 프래그먼트를 사용하여 어떻게 이런 제한점들을 극복하는지도 살펴보겠다. 또한 더 간결한 DOM, 즉 더 나은 코드 구조를 만들기 위해 포털을 사용하는 방법도 알아보겠다, 또한 ref란 무엇인지 왜 필요한지도 알아보겠다

모듈 리소스 여러분들은 여러분들의 코드를 제 코드와 비교해보고 싶을 수 있습니다 (예: 에러 찾기 + 수정). 그것을 위해, 여러분은 이 모듈의 여러 코드 스냅샷°을 이 Github 저장소에서 찾을 수 있습니다 https://github.com/academind/react-complete-guide-code/tree/08-practice-project 사용 지침은 이 링크로 연결되는 페이지에서 찾을 수 있습니다. /code 폴더에서 스냅샷을 고르시면 됩니다 - 하위 폴더 이름은 이 코스 섹션의 강의 이름과 쉽게 일치하도록 설정되었습니다. 여러분은 또한 해당 Github 저장소에서 섹션 슬라이드 (사용 가능한 경우) 를 찾을 수 있습니다.

모달 창을 띄우는 유무를 결정하기 위해서 state를 이용할 것이다 여기서 변수에 + 를 붙이는 것은 Number 형태로 변환하기 위함이다 에러마다 메세지를 다르게 했고 모달창에서 background 클릭시 모달 창의 에러 상태를 변경 시켜 사라지게 했다 UserForm.js import "./UserForm.css"; import { useState } from 'react'; import Card from './UI/Card'; import Button from "./UI/Button"; import ErrorModal from "./UI/ErrorModal"; const UserForm = (props) => { const [userName, setUserName] = useState(""); co..