Lighthouse of FE biginner

보통은 삼항 연산자를 사용해 null을 리턴하거나 && 연산자를 사용해 랜더링을 하지만 Fragment가 빈 Element라고 생각하고 비어있는 Fragment를 리턴하는 경우도 있다. 사실 성능적으로 눈에 띄는 차이는 없지만 Fragment 또한 React에서 제공하는 API라는 점을 생각해야 한다. Fragment?React.Fragment란 리액트에서 제공하는 API이다. 컴포넌트를 만드는 경우 컴포넌트의 구성요소 들은 그룹화 되어야 한다. 리액트의 컴포넌트는 반드시 하나의 최상위 태그를 가지고 리턴되어야 하기 때문이다. 때로는 그룹화를 위해 html 태그를 사용하는 것이 낭비라고 생각될 수 있다. 자칫 잘못하면 태그가 무더기로 있는 컴포넌트를 확인할 수 있기 때문이다. 이때 그룹화를 위해 htm..

컴포넌트는 리액트를 사용해 프론트엔드 개발을 한다면 반드시 마주치게 됩니다. 컴포넌트란 무엇일까요?컴포넌트는 리액트에 국한된 개념이 아닙니다.컴퓨터 공학을 공부하다보면 종종 컴포넌트라는 단어를 마주치게 되는데요. 여기서 컴포넌트란 독립된 모듈을 뜻합니다. 독립된 모듈들인 컴포넌트들이 그룹을 이루고, 그룹들이 모여서 소프트웨어가 되는 것 입니다.리액트에서의 컴포넌트도 마찬가지의 개념입니다. UI를 구성하기 위한 독립된 모듈을 뜻하는데요, 컴포넌트들이 모여서 하나의 페이지를 이루고, 컴포넌트들이 모여서 웹 프론트엔드 애플리케이션이 됩니다. 리액트에서의 컴포넌트리액트에서의 컴포넌트는 크게 두 가지로 구분할 수 있습니다. 특정 기능을 담고 있는 featured component와 어디서든 담백하게 사용할 수 있..

React Server ComponentRSC가 서버에서 실행이 되지만 RSC 와 SSR 은 동일한 개념이 아닙니다. RSC 는 클라이언트에서 실행되는 컴포넌트(RCC)와는 다르게, 빌드 시점에 생성이 되거나 서버와 함께 사용한다면 서버에서 랜더링이 수행되는 컴포넌트 입니다. RSC의 개요RSC는 서버에서 랜더링이 수행된다. 즉 클라이언트에서 랜더링이 수행되지 않기 때문에 클라이언트 전용 API를 사용할 수 없다. 또한 서버에서 랜더링이 되기 때문에 클라이언트에서 랜더링이 발생하지 않는다. (리랜더링이 없다.) 기본적으로 모든 컴포넌트는 서버 컴포넌트이다. 만약 클라이언트 컴포넌트를 사용하고 싶다면 "use client"를 컴포넌트 파일 최상단에 기입해야한다. 서버 컴포넌트를 가지고 있는 페이지는 요청을..