Per ardua ad astra.

const Component vs. function Component들어가며리액트(React.js)에서 @const Component@ 형태의 화살표 함수 방식과 @function Component@ 형태의 함수 선언 방식으로 컴포넌트를 선언할 수 있다.위의 두 가지 방법에 대한 차이점을 정리해본다. ① 화살표 함수 방식const MyComponent = () => { return( .. )} 화살표 함수(Arrow Function)로 작성할 수 있으며, 짧은 코드로 작성할 수 있다는 장점이 있다.예를 들어, 한 줄로 반환하는 경우, @return@ 키워드를 생략할 수 있다.const MyComponent = () => ( ... ) 컴포넌트 선언과 동시에 @export default..

외부 컴포넌트 라이브러리의 UI 컴포넌트 스타일을 직접 수정하는 방법들어가며@antd@ 등 외부 컴포넌트 라이브러리의 UI 컴포넌트를 Styled-Components를 이용하여 직접 수정하는 방법을 정리해본다. 방법스타일 파일(@컴포넌트명.style.js@)이나 컴포넌트 파일(@컴포넌트명.js/jsx/tsx@)에서 다음과 같이 코드를 작성하고 변경/추가하고자 하는 스타일을 넣어주면 된다.import styled from "styled-components";import { 외부컴포넌트명 } from "외부_컴포넌트_라이브러리_패키지";export const 커스텀외부컴포넌트명 = styled(외부컴포넌트명)` 속성: 값;`; 그리고 다른 일반적인 Styled-Components 요소처럼 사용하면 된다.i..

index.js로 컴포넌트(Component), 페이지(Page) 관리하기들어가며다음과 같이 @src@ 폴더 내부에 있는 @components@, @pages@ 폴더 안에 @index.js@ 파일을 생성하여 여러 컴포넌트와 페이지들을 하나의 파일에서 관리할 수 있다.이와 관련된 내용을 정리해본다. index.js개념리액트(React.js) 프로젝트에서 @pages@나 @components@ 폴더 안에 위치한 @index.js@ 파일은 해당 폴더 내의 여러 컴포넌트들을 한 곳에서 쉽게 불러올 수 있도록 다시 @export@ 해주는 역할을 한다.@index.js@ 파일 안의 내용은 다음과 같이 구성할 수 있다. 사용 방법@pages@ 또는 @components@ 폴더에 @index.js@ 파일을 생성한 후,..

컴포넌트를 생성하는 방법 2가지 (JSX, React.createElement)들어가며리액트(React.js)에서 컴포넌트를 생성하는 방법 2가지를 정리해본다. 컴포넌트 생성 방법① 함수형 컴포넌트function Greeting() { return ( hello world );} 함수형 컴포넌트는 자바스크립트 함수로 정의되며, JSX(JavaScript XML) 문법을 사용하여 UI를 반환한다.@@와 @@ 태그를 사용하여 UI를 정의한다.JSX는 Babel 같은 컴파일러를 통해 @React.createElement@ 호출로 변환된다.코드가 더 직관적이고 읽기 쉬우며, 컴포넌트를 작성할 때 HTML과 유사한 문법을 사용할 수 있다. ② @React.createElement@imp..

Image 컴포넌트들어가며Next.js에서 기본으로 제공하는 Image 컴포넌트에 대해 정리해본다. Image 컴포넌트개념Next.js에서 다양한 퍼포먼스 기능과 편리한 설정을 지원하는 컴포넌트 이미지 컴포넌트를 이용하면 이미지 불러오기 작업을 최적화할 수 있다. 또한 이미지 크기 조정, 지연 로딩(Lazy Loading)을 지원하며, WebP와 같은 최신 이미지 형식이 자동으로 처리된다. 다양한 기기와 화면 크기에 맞게 이미지 크기를 유동적으로 조절할 수 있다. 사용 방법기본 사용법@next/image@ 모듈을 불러와서 사용한다.import Image from 'next/image';export default function Home() { return ( Next.js Image E..

useImperativeHandle과 forwardRef들어가며리액트(React.js)에서 사용되는 @useImperativeHandle@과 @forwardRef@에 대해 알아보자.@forwardRef@와 @useImperativeHandle@은 컴포넌트 간의 참조를 다루기 위한 도구이다.이 두가지 개념을 이해하면 컴포넌트 외부에서 내부의 DOM 요소나 메서드에 접근할 수 있게 되어, 고급 컴포넌트 설계에 유용하다고 한다. forwardRef개념부모 컴포넌트로부터 전달된 @ref@를 자식 컴포넌트가 받을 수 있게 해준다.@forwardRef@를 사용하지 않고 자식 컴포넌트에 @ref@를 전달할 수 없다.@ref@는 DOM 요소에만 붙일 수 있다.하지만 @forwardRef@를 사용하면, 부모 컴포넌트가 ..

부모 컴포넌트에서 자식 컴포넌트로 요소 넘기는 방법들어가며리액트에서 부모 컴포넌트에서 자식 컴포넌트로 요소를 넘기는 방법을 알아보자. 방법부모 컴포넌트에서 자식 컴포넌트로 넘길 요소의 타입을 지정할 수 있는데, @string@ 형태로 지정해주면 된다.이떄, @prop@ 이름의 첫 글자는 항상 대문자이어야 한다.App.jsx@ButtonsContainer@ @prop@을 @"menu"@로 지정해보았다.return ( handleSelect("components")} > Components handleSelect("jsx")} > JSX ..