728x90 728x90 Frontend/React30 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. Props와 Children Props와 Children Props 자바스크립트에서 함수를 작성할 때 매개변수를 받아 함수를 재사용할 수 있도록 만든다. 그래서 다른 매개변수 값으로 같은 함수를 호출할 수 있고 다른 결과 값을 반환한다. 마찬가지로 컴포넌트에서도 매개변수로 다른 값을 받아서 다른 결과를 반환 할 수 있다. props는 properties를 나타내는 것으로 사용자 지정 컴포넌트의 속성을 설정할 수 있다. 재사용 가능한 컴포넌트를 만들 수 있게 해주고 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 수 있기 때문에 아주 중요한 개념이다. 또한 부모 컴포넌트 데이터를 props로 받아 자식 컴포넌트에 전달이 가능하다. import Profile from "./Profile"; const members = [ { name: ".. 2023. 1. 6. 이전 1 ··· 4 5 6 7 8 다음 728x90 728x90
