What I studied

Next.js에서 Style을 적용하는 방법에는 어떤 것이 있을까? ① CSS module을 사용하는 방법 가장 먼저 css module을 사용하는 방법을 적용해보았는데 NavBar.js에 CSS를 적용하기 위해 NavBar.module.css라는 파일을 생성해주었다. 그 후 css 파일 안에서 클래스 선택자로 스타일을 만들어주었고 이를 NavBar.js에 불러와 사용하였다. // NavBar.module.css .link { text-decoration: none; } .active { color: tomato; } link의 경우 두가지 a태그에 모두 적용이 되어야하고, active의 경우 조건부로 true인 경우에만 적용이 되도록 해야하는데 그럴 때는 ``을 이용하거나 className을 배열로 만..

Next.js란? 지금까지는 리액트를 사용하여 CSR로 애플리케이션을 구성했다면 지금부터는 next.js라는 프레임워크에 대해 공부한 것을 정리해보려고 한다. 기본적으로 리액트는 SPA이기 때문에 CSR을 기반으로 운영되어지지만 next.js를 이용하면 서버 사이드 렌더링을 간편하게 적용할 수 있게 된다. 클라이언트 사이드 렌더링의 경우 html 파일이 하나이며 나머지가 모두 js 파일로 이루어져 처음에는 흰색 화면을 가지고 온 후, 자바스크립트 번들을 다운 받고 나서 화면을 렌더링하게 된다. 반면에 next.js를 이용하여 SSR로 작동시키면 pre-rendering을 하기 때문에 기본적으로 html을 먼저 불러와 사용자에게 보여주고 그 후에 리액트에 연결해 어플리케이션을 보여주는 식으로 작동된다. 여..

리액트에서 전역상태관리를 하기 위해 redux라는 라이브러리를 사용했었는데 코드의 양도 많고 여러가지 불편한 점이 하나씩 보이기 시작하면서 새로운 라이브러리를 찾게 되었다. 요즘 많이 쓰고 있다는 React-query와 SWR이라는 라이브러리를 알게 되었는데 두가지 중 먼저 시도해보고자 했던 것이 SWR이었다. 리덕스 사용시 불편했던 점 리덕스 흐름에 따라 (View -> Dispatch -> Action -> Reducer -> Store -> State) 작성해야하는 코드의 양이 많음 한번 가져왔던 정보라도 컴포넌트가 마운트 될 때마다 새로 가져와서 갈아끼우는 작업이 비효율적 지속적으로 리덕스 로컬 스토어의 상태를 서버 상태와 맞추기 위해 추가적으로 동기화 작업을 해줘야함 그래서 SWR이란? SWR은..

최종 프로젝트를 진행하던 중 리액트 lazy-loading으로 최적화 작업을 진행했다. 지연로딩(lazy-loading)이라는 것은 로딩을 바로 하지 않고 지연시켰다가 나중에 로딩하게 해준다는 뜻으로 사용자가 사이트에 접속했을 때 보이지 않는 것까지 모두 로드해오는 것이 아니라 보이는 페이지만 로드한 후 다른 페이지에 접속했을 때 그곳의 데이터를 로드해오는 작업을 해주는 것이다. 큰 React 애플리케이션은 일반적으로 많은 구성 요소와 유틸리티 메서드 및 타사 라이브러리로 구성되는데 필요할 때만 애플리케이션의 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드하는 즉시 대규모 단일 JavaScript 번들이 사용자에게 전송된다. 이러한 불필요한 작업이 반복되면 페이지 성능에 영향을 줄 수 ..

리덕스란? 대표적인 상태관리 Javascript 라이브러리로 컴포넌트 내부에서 사용하는 데이터인 상태를 관리하기 위해 사용한다. 만약 하나의 부모 컴포넌트와 자식 컴포넌트들이 여럿이라는 상황을 가정해보자. 만약 자식 1의 state를 자식 6에서 사용하고 싶다면 자식 1 -> 부모 -> 자식 3 -> 자식 6으로 state를 넘겨줘야하는데 하위 컴포넌트에서 상위컴포넌트로 데이터를 넘겨주는 것은 적절한 방법이 아니다. 그렇기 때문에 전역상태관리를 위한 라이브러리인 리덕스를 이용하여 하나의 스토어에 저장해둔 상태를 원하는 컴포넌트에 불러다 사용하면 되는 것이다. 이렇게 리덕스를 이용하면 컴포넌트끼리 같은 상태를 공유해야할 때도 쉽게 적용할 수 있으며 상태 업데이트 로직을 분리시켜 더욱 효율적인 관리가 가능해..

1. React Hooks란? 리액트 훅은 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16.8버전에 새로 추가된 기능이다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다. 2. Hook 규칙 1) 최상위에서만 Hook을 호출해야한다. 반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. 리액트 훅은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행하게 될 경우 해당 부분을 건너뛰는 일이 발생할 수도 있기 때문에 순서가 꼬여 버그가 발생할 수 있다. 그렇기 때문에 이 규칙을 따르면 useState 와 useEffect가 여러번 ..

React의 state 와 props 실전 프로젝트가 마무리되어가면서 그동안 공부했던 기본적인 내용들을 하나하나 다시한번 되짚어보려고 한다. 리액트를 사용하게 되면서 가장 기본적이고 중요하게 알아야했던 state와 props의 개념과 차이에 대해서 설명할 것이다. Props props는 properties의 약자로 부모 컴포넌트가 자식 컴포넌트로 내려주는 data를 말한다. 즉 상위 컴포넌트의 데이터를 하위 컴포넌트에 공유하는데 사용하며 자식 컴포넌트는 부모 컴포넌트로부터 props를 받아 사용한다. props는 부모요소에서 설정하는 것으로 상속받은 자식 컴포넌트 내에서 수정이 불가능한데 리액트는 부모에서 자식으로라는 일방향성 상속이라는 특징을 가지고 있기 때문이다. // 페이지네이션에서 넘겨주는 pro..

1. JSX란? JSX는 자바스크립트에 XML을 추가한 확장형 문법으로 리액트 요소를 만들 수 있게 해줍니다. JSX를 이용하면 보다 더 간단한 코드로 우리가 원하는 화면을 보여줄 수 있게 됩니다. 2. JSX 문법의 특징 ① 태그는 무조건 닫혀야 한다. , , 와 같이 짝이 있는 태그라면 반드시 닫는 태그와 함께 사용하여야한다. 단독으로 쓰이는 태그의 경우에도 반드시 태그를 닫아줘야 한다. ② 렌더링 될 루트 요소는 하나만 존재해야하기 때문에 두개 이상의 요소는 하나의 요소로 감싸져야한다. import React from 'react'; function App() { return ( Hello Hello Jieun ) export default App; ③ 자바스크립트 표현식 사용 JSX 내부에서는 변..

함수형 컴포넌트 생성하기 함수형 컴포넌트를 생성하기 위해 먼저 src 폴더 안에 Main.js라는 js파일을 만들어줍니다. import React from 'react'; function Main() { return 메인 페이지 입니다. } export default Main; 리액트 컴포넌트를 만들 때는 먼저 import를 하여 리액트를 불러와야 합니다. 그리고 코드 최하단에 Main이라는 컴포넌트를 내보내주겠나는 export를 해줍니다. 여기서 생각해볼 수 있는 것은 import가 있다면 export도 있어야한다는 것. 함수형 컴포넌트를 만들었다면 이제 App.js 파일로 이동해줍니다. import React from 'react'; import Main fr..