728x90 728x90 Frontend54 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. HTML 요약 정리 HTML 요약 정리 HTML 웹페이지라는 문서에 마크업 하기 위한 언어 또는 구문 마크업 언어, 완전한 프로그래밍 언어가 아니다. 문서에 마크업을 할 뿐이다. HTML은 텍스트 컨텐츠를 마크업하여 구조화 하는 목적으로 사용된다. 태그를 통해서 텍스트를 마크업 하여 엘레먼트 요소를 만든다. 단락요소 HTML에서 단락처럼 묶고 싶은 내용이라면 텍스트만을 의미하는 것은 아니고 묶고 싶은 단락을 태그로 묶을 수 있다. HTML에서 단락처럼 묶고 싶은 내용이라면 어떤 것이든 태그로 묶을 수 있다. 이미지일 수도 있고 input 태그나 label 태그일 수도 있다. 제목 요소 ~ 한 페이지에 최상위 주제가 두 가지일 수 없기 때문에 은 최상단에 딱 하나만 사용한다.그 다음에는 하위 제목 또는 하위 섹션이 있을 수 .. 2023. 1. 12. Props와 Children Props와 Children Props 자바스크립트에서 함수를 작성할 때 매개변수를 받아 함수를 재사용할 수 있도록 만든다. 그래서 다른 매개변수 값으로 같은 함수를 호출할 수 있고 다른 결과 값을 반환한다. 마찬가지로 컴포넌트에서도 매개변수로 다른 값을 받아서 다른 결과를 반환 할 수 있다. props는 properties를 나타내는 것으로 사용자 지정 컴포넌트의 속성을 설정할 수 있다. 재사용 가능한 컴포넌트를 만들 수 있게 해주고 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 수 있기 때문에 아주 중요한 개념이다. 또한 부모 컴포넌트 데이터를 props로 받아 자식 컴포넌트에 전달이 가능하다. import Profile from "./Profile"; const members = [ { name: ".. 2023. 1. 6. 이전 1 ··· 10 11 12 13 14 다음 728x90 728x90
