React (28) 썸네일형 리스트형 CSS Module CSS Module을 이용하면 각 모듈에서만 불러온 css 파일이 적용되기 때문에 클래스 이름의 중복 걱정 없이 css 코드를 작성할 수 있다. 결과적으로 보다 간결하게 class 이름을 지을 수 있다. npx create-react-app 명령어로 만든 프로젝트에서 사용할 수 있다. .css 파일이 아닌 .module.css 확장자의 파일을 만들고 아래처럼 styles라는 변수로 불러와서 사용한다. App.js import styles from './App.module.css'; function App() { return ( hello world ); } export default App; App.module.css .first { color: dodgerblue; } .second { color: p.. 리액트 라우터의 기본 url(/)이 렌더링 되지 않게 하는 간단한 방법 리액트 라우터는 path의 url에 해당하는 컴포넌트를 렌더링 해준다. 그러나 시작하는 부분만 일치하더라도 렌더링해주는 방식이기 때문에 위의 경우 "/admin" url로 접근해도 만 렌더링 되는게 아닌 도 같이 렌더링이 된다. 때문에 보통 라는 모듈을 함께 써서 라우팅을 해주지만 간단하게 url이 정확히 일치할 때만 렌더링 되게 하려면 속성에 exact를 넣어준다. 이제 은 url이 "/" 일 때만 렌더링이 된다. 리액트에서 돔 엘리먼트를 변수로 참조하는 방법 function App() { const name = React.createRef(); // 변수를 먼저 선언한다. return ( // 선언한 변수를 참조하고 싶은 엘리먼트에 대입한다. // name.current와 같은 방법으로 엘리먼트를 참조할 수 있다. console.log(name.current.value)}>클릭 ); } 위 방법은 어쩔 수 없이 사용해야할 때에만 쓴다. 리액트 컴포넌트에 default props 설정 방법 때로는 props에 재사용을 위해서 가변적이지 않은 값을 넣어야할 때도 있다. 그럴 때에는 아래처럼 defaultProps에 property를 설정해준다. function Profile(props) { const { name } = props; return {name} } Profile.defaultProps = { name: 'socratone' } 리액트의 주요한 특징 - 렌더링 렌더 메소드의 아웃풋으로 리액트 엘리먼트가 나오는데 이 엘리먼트는 DOM이 아니고 DOM 엘리먼트를 가리키는 자바스크립트 객체다. DOM보다 가벼워 새로 만들더라도 리소스를 덜 잡아 먹는다. 이를 버추얼 DOM이라고 부른다. 컴포넌트의 state가 바뀌었을 때 새로운 리액트 엘리먼트를 얻게 되고 이전의 엘리먼트와 비교한다. 바뀐 부분이 있다면 DOM의 해당 부분을 업데이트해서 버추얼 DOM과 맞춘다. 단순히 컴포넌트의 state를 바꾸면 리액트는 자동적으로 이에 맞게 변화시켜 주는 원리다. 그래서 이 라이브러리의 이름이 react이기도 하다. 참고 : youtu.be/Ke90Tje7VS0?t=205 React.memo 번역 리액트의 memo는 higer order component다. 클래스에서 사용되는 PureComponent와 비슷하다. React.memo로 렌더링 될 함수 컴포넌트를 감싸주면 마지막에 렌더링된 값을 기억했다가 내려오는 props가 같을 때 렌더링을 건너 뛰고 기억했던 값을 재사용한다. React.memo는 props의 변화만 체크한다. memo로 감싸준 함수 컴포넌트에 useState나 useContext를 사용하면 state나 context가 변할 때에는 다시 렌더링한다. 기본적으로는 props에 있는 객체들을 얕은(shallowly) 방식으로 비교하지만 두 번째 인자를 활용해서 사용자가 원하는 방식으로 비교할 수도 있다. 이 함수는 오직 성능 최적화를 위해서 존재한다. 렌더링을 막기 위한 목적으로 .. 리액트를 위한 비쥬얼 스튜디오 익스텐션 - Simple React Snippets 비쥬얼 스튜디오에서 Simple React Snippets라는 익스텐션을 깔면 리액트 작업 중 js 파일에서 간단하게 컴포넌트 프리셋을 불러올 수 있다. imrc를 입력하면 아래처럼 react를 import하고 import React, { Component } from 'react'; cc는 class 컴포넌트를, sfc는 function 컴포넌트 초기 코드를 불러 온다. 리액트 라우터를 이용한 리액트 프로젝트 기본 설정 방법 1. 다음을 입력하면 리액트 개발 환경에 필요한 기본적인 것들이 갖춰진 프로젝트 폴더가 생성된다. npx create-react-app 폴더이름 https://create-react-app.dev/docs/getting-started 2. 다음을 입력해서 리액트 라우터를 설치한다. npm install --save react-router-dom 이제 라우터를 이용해 리액트에서 작성한 결과물을 우리가 만들 서버에서 불러올 수 있다. https://create-react-app.dev/docs/installing-a-dependency 3. src/App.js의 내용을 아래 페이지의 Basic Example 링크의 코드로 바꾸는 게 시작하기 좋다고 한다. https://create-react-app.dev/.. 이전 1 2 3 4 다음
