React.js (9) 썸네일형 리스트형 (React) Next.js 에서 리액트 포털로 모달 만들기 * 문제점 모달 컴포넌트를 만들 때 우리는 흔히 useState을 잔뜩 사용해서 모달에 입력 받아야 하는 상태값들을 나열해준다. 그리고 모달을 띄울 boolean 값과 모달 엘리먼트의 position을 fixed로 설정하고 표시를 한다. 만일 가입이나 확인 버튼이 있다면 모달의 boolean 값을 true로 하고 background을 클릭할 경우 false로 하는 방법을 흔히 이용한다. 위의 방법은 간단한 방법으로 모달 컴포넌트를 구현하고 작동시켜 준다. 하지만 재사용성의 관점에서는 재활용할 께 딱히 없어 코드 복붙 외에는 좋은 코드라고 할 수 가 없다. * 해결방법 - 리액트 포털 ReactDOM.createPortal(child, container) 포털은 '부모 컴포넌트 DOM 계층 외부에 있는 D.. (React) React with Babel and Typescript loader : JSX를 읽어서 모듈 로더를 통해서 트랜스 파일 해주는 역할. JSX를 읽어서 ES6로 바꾸어 준다. ts-loader : ts를 js로 바꾸어 주는 역할 (React) useRef : 변화는 감지해야 하지만 그 변화가 렌더링을 발생시키면 안되는 값을 다룰 때 사용 useRef 유스 케이스 1. 변수 관리 : 렌더링과는 무관하게 변수를 관리해야 하는 경우 const initailValue = useRef(0) //useRef는 current 객체를 가진다. console.log(initail.current) useRef는 객체이고 current라는 키에 useRef의 값을 담고 있다. let, const 키워드로 선언된 값은 컴포넌트가 렌더링되면 초기값으로 변하게 된다. 컴포넌트의 생명주기와는 무관하게 관리되어야 할 값들이 let, const에 담기게 된다면 렌더링이 발생하는 순간 그 값들은 초기값으로 변하게 되어 누적 관리된 값들이 사라지게 된다. 이런 문제를 방지하기 위해 useRef를 사용하면 렌더링과는 무관하게 변수를 관리할 수 있다. 2. DOM 접근 : .. (React) React 폴더 구조와 export default & export React의 폴더 역할을 자주 쓰이는 범위에서 알아본다. assets : 에셋, 이미지, font 등의 파일들 common utils : 자주 쓰이는 함수들 axios : axios 설정 ( 서버 통신용. 헤더 설정 등 ) components : 자주 쓰이는 공용 컴포넌트, 페이지 내의 컴포넌트 등 컴포넌트의 집합 config : 설정 파일을 넣어놓습니다. ( firebase 등 ) .env로 환경변수를 만드시는 것도 좋은 선택입니다. pages : 라우트에 할당되는 페이지 컴포넌트들의 집합입니다. routes : 라우터를 담아놓습니다. 로그인 전처리, 로딩 등을 쉽게 접근할 수 있습니다. styles : 전역 스타일, 자주 쓰이는 스타일 등을 담아놓을 수 있습니다. tests : 테스트를 담아놓는 입니.. (React) React에서 map으로 여러개의 엘리먼트 표시하기 React에서 브라우저에 여러개의 태그 엘리먼트를 표시를 할 때 map함수를 사용한다. 아래와 같은 posts 배열이 있고 post를 변수로 받아서 브라우저에 표시해주는 것이다. 방법은 return 안에 map을 사용하는 방법가 아닌 방법이 있다. return 문 안에서 map 메소드를 사용할 수는 없을까요? 사용할 수 있습니다. JSX를 사용하면 중괄호 안에 모든 표현식을 포함할 수 있기 때문에 map 메소드의 결과를 return문 안에 인라인으로 처리할 수 있습니다. 코드 가독성을 위해 변수로 추출할지 아니면 인라인에 넣을지는 개발자가 판단해야 할 몫입니다. const posts = [ { id: 1, title: "Hello World", content: "Welcome to learning Rea.. [React] 기초 - Achievement Goals 답하기 React Intro Achievement Goals 1. React의 3가지 특징에 대해서 이해하고, 설명할 수 있다. React의 특징은 선언형, 컴포넌트 기반, 범용성이다. 아래 코드는 JSX(JS XML) 문법으로 작성되었다. WeatherContainer 안에 3가지의 컴포넌트가 구현되었다. 이처럼 코드 작성자가 아닌 다른 사람이 코드를 보면 웹페이지의 기능을 알기 쉽다. const Weather = () => ( ) 다음은 장바구니 리스트와 제품을 컴포넌트로 분류한 코드이다. 고차함수 map을 이용해 Item 컴포넌트의 item변수에 배열 요소를 react의 item에 매핑하고 있다. const Cart = ({ items }) => ( 장바구니 {items.map((item) => )} 이처.. [React] 화살표 함수와 return 문 소괄호 처리 JSX 문법에서 return문을 사용할 때 그 뒤에 소괄호를 사용해야 하는 규칙이 있다. (리액트 공식 문서에서는 해당 내용을 확인하지 못하였으나 공식문서에 나오는 예제 코드나 다른 검색 내용들이 그러한 규칙이 있다고 명시한다.) const Features = () => { return ( ); }; 위의 코드에서 return 문 뒤에 소괄호를 적어 주었다. return 문 뒤에 소괄호를 넣는 이유는 어떤 요소를 반환하는지에 대한 가독성을 높이기 위함이라고 한다. 그리고 JSX에서 return 문 뒤에 소괄호를 넣는 용법이 있다. (참고 James Nelson, 2016년 8월 11일, “왜 자바스크립트의 return 문에 괄호를 사용하는가?(Why Use Parenthesis [sic] on JavaS.. (React 오류) Assign array to a variable before exporting as module default HA(Hire Assesment) 1차 리액트로 간단한 썸네일 뷰와 라우터 기능을 구현하는 것이다. 결과는 사실 좋지 않다. 1. 정상적인 작동 기능을 구현하였어도 컴포넌트를 통해서 썸네일 이미지를 map함수를 사용 해서 보여줘야 하는데 자바스크립트와 html 지식이 혼재되고 props으로 무엇을 받아야 하는지 감을 잡지 못해서 그냥 바로 return 안에서 썸네일 이미지를 map함수로 표시해 주었다. 2. 자정을 40분 넘긴 지금. 여전히 테스트 결과는 100%로 나오지 않지만 테스트 기준에 어느정도 부합하게 컴포넌트도 사용했다. =========== 리액트 에러메세지가 많이 나와서 그 부분을 정리해 두려고 한다. Assign array to a variable before exporting as mo.. 이전 1 2 다음
