react3 next에 대하여 1. next란?React를 기반으로하는 웹 개발 프레임워크React는 UI를 만들기 위한 자바스크립트 라이브러리React는 CSR로 (Client Side Rendering) 서버 화면에 보여줄 수 있는 html 파일을 보내주는게 아니라 처음에는 빈 html 파일을 보여주고 이후에 필요한 리소스들을 다운 받아 보여주기 때문에 초기 로딩속도가 느리고, 처음 빈 html을 보여줘 검색 엔진 최적화 측면에서 불리하다는 문제. 이러한 문제를 해결하기 위해 next.js 탄생 2. 특징사전렌더링(pre-rendering) :next는 기본적으로 빌드시 만든 모든 페이지 미리 렌더링하여 보여줌으로서, 페이지 불러오는 속도가 빨라 SEO(검색엔진최적화)에도 좋음 Search Engine Optimization 검.. 2024. 6. 10. react 주요 개념 1. 컴포넌트 Component리액트 앱을 이루는 최소화 단위, 입력(props)을 받아 출력(Element) 하는 역할재사용 가능, 코드 양 줄임, 개발 시간 줄임, 유지보수 쉬움붕어빵에 비유를 많이 하는데 붕어빵틀이 component, 붕어빵 재료가 props, 최종 나오는 붕어빵이 Element된다. 2. JSXconst element = Hello, world!;javaScript + XML필수 사용은 아니지만 JS 코드 안에서 UI 관련 작업을 할 수 있기 때문에 시각적으로 더 도움이 된다3. 라이프 사이클리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리라 각 컴포넌트의 수명 주기가 존재한다. 라이프 사이클은 컴포넌트가 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 것.. 2024. 6. 10. Tab menu 쉽게 만들기 만들어 볼 것 버튼 값에 따라 아래 보여지는 내용이 달라지는 탭메뉴를 쉽게 만들어봤다 1. 버튼 구성 const tabs = [ { id: 'default', label: '후라이드' }, { id: 'spicy', label: '양념' }, ]; tabs 배열을 선언 후 각 요소에 id와 label 속성을 가진 객체 구성 2. 탭버튼 생성 // 위에서 선언한 tabs 배열을 사용하여 동적으로 탭 버튼 생성 {tabs.map((tab) => ( handleTabClick(tab.id)} > {tab.label} ))} tabs.map() : map을 사용하여 배열의 각 요소에 대해 콜백 함수 호출 key : 배열을 렌더링할 때 각 요소를 식별하는 역할 type : button : 버튼으로 설정시 기본 동.. 2023. 8. 1. 이전 1 다음
