쑥쑥자라기🌱

Built-In CSS Support (내장 CSS 지원) Next.js를 사용하면 JavaScript 파일에서 CSS 파일을 가져올 수 있습니다. 이것은 Next.js가 import 개념을 JavaScript 이상으로 확장하기 때문에 가능합니다. CSS-in-JS 격리된 범위 CSS에 대한 지원을 제공하기 위해 styled-jsx를 번들로 제공합니다. 목표는 불행히도 서버 렌더링을 지원하지 않고 JS 전용인 Web Components와 유사한 "Shadow CSS"를 지원하는 것입니다. https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js styled-jsx를 사용하는 컴포넌트는 다음과 같습니다. ``` {` ..

Array.prototype.join() join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다. const elements = ['Fire', 'Air', 'Water']; console.log(elements.join()); // expected output: "Fire,Air,Water" console.log(elements.join('-')); // expected output: "Fire-Air-Water" https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join CSS Module 사용하기 1. className={`${styles.link} ${router.pathname =..

No HTML link for pages 페이지 간 클라이언트 측 경로 전환을 활성화하고 single-page app 경험을 제공하려면 Link컴포넌트가 필요하다. // 변경 전 About Us // 변경 후 import Link from 'next/link' About Us https://nextjs.org/docs/messages/no-html-link-for-pages useRouter() 앱의 함수 컴포넌트에서 router객체 내부에 접근하려면 userRouter()훅을 사용할 수 있다. useRouter는 React Hook입니다. 즉, 클래스와 함께 사용할 수 없습니다. withRo..

pages/about.js 생성 -> localhost:3000/about (O) localhost:3000/about-us(X) 다만 예외사항으로, index.js의 경우에는 앱이 시작하는 파일이라고 보면 된다. 즉 localhost:3000 그 자체다 뒤에 /index 로 붙이면 안된다. 이 강의를 들을 때는 import react from "react"를 쓸 필요가 없다. 다만 useState,useEffect, lifecycle method 같은 애들을 써야 할 경우에는 꼭 import를 해줘야 한다.

라이브러리와 프레임워크의 주요 차이점 라이브러리와 프레임워크의 주요 차이점은 "Inversion of Control"(통제의 역전)이다. 라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있습니다. 그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출한다. 라이브러리 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림 프레임워크 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름

리덕스는 리액트 생태계에서 사용률이 높은 상태관리 라이브러리이다. 리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다. Context API를 사용해도 글로벌 상태 관리를 할 수 있고 상태 관리 로직을 분리할 수 있다. 특히 Context API와 useReducer Hook을 사용해서 개발하는 흐름은 리덕스를 사용하는 것과 개발 상식이 유사하다. 리덕스에서도 리듀서와 액션이라는 개념을 사용하기 때문이다. Redux는 Context API가 지금의 형태로 사용방식이 개선되기도 전에 그리고 useReducer라는 Hook이 존재하기도 전부터 만들어진 라이브러리이다. 사실 Context API가 개선되기 전에는 ..

1. 저장공간 함수형 컴포넌트에서 useref를 부르면 ref 오브젝트를 반환해 준다. const ref = useRef(value) ref 오브젝트는 이렇게 생겼다. {current: value} 인자로 넣어준 초기 값은 ref 안에 있는 current에 저장된다. ref 오브젝트는 수정이 가능하기 때문에 언제든 원하는 값으로 바꿀 수 있다. {current: "hi"} // const ref = useRef("h1") {current: "hello"} // ref.current ="hello" {current: "nice"} // ref.current = "nice" 반환된 ref는 컴포넌트의 전 생애주기를 통해 유지된다. 컴포넌트가 계속해서 렌더링이 되어도 컴포넌트가 언마운트되기 전까지는 값을 그대..

어떤 컴포넌트가 Mount(화면에 첫 렌더링) 되었을 때, Update(다시 렌더링) 될 때, 혹은 Unmount(화면에서 사라질 때) 때 특정 작업을 처리할 코드를 실행시켜주고 싶다면 useEffect를 사용하면 된다. 기본적으로 useEffect Hook은 인자로 콜백 함수를 받는다. 콜백 함수란 다른 함수의 인자로 전달된 함수를 의미한다. 이 콜백 함수 내부에 원하는 작업을 처리해 줄 코드를 작성해 주면 된다. useEffect는 두 가지 형태가 있다. 1) useEffect의 인자로 하나의 콜백 함수만 받는 형태 useEffect(()=>{ //작업... }) - 렌더링 될 때마다 콜백이 실행 (컴포넌트가 맨 처음 화면에 렌더링 될 때, 컴포넌트가 다시 렌더링 될 때) 2) useEffect의 첫..