reactjs (23) 썸네일형 리스트형 ChatGPT가 알려주는 Next.JS 설치 방법 및 간단 소개 0. next.js: React 프로젝트에 SSR을 적용해보자 React 프로젝트를 진행할 때, 초기 로딩 속도를 개선하고 SEO(Search Engine Optimization)를 향상시키기 위해서는 서버 사이드 렌더링(SSR)을 구현하는 것이 좋습니다. 그리고 next.js는 SSR을 구현하는 데에 특화된 React 기반의 프레임워크입니다. 다양한 기능을 제공하여 사용자 경험을 개선할 수 있으며, 빠른 로딩 속도와 안정성을 보장합니다. 또한, 다양한 플러그인과 라이브러리를 지원하며, 커뮤니티가 활발하게 활동하고 있습니다. 따라서, 이번 포스트에서는 next.js를 사용하여 React 프로젝트에 SSR을 적용하는 방법에 대해 알아보겠습니다. 1. next.js 설치하기 우선, next.js를 사용하기 .. reactjs로 동적인 UI 만들어보기 1. 개요 동적인 UI 만드는 STEP HTML, CSS로 미리 디자인 완성 UI의 현재 상태를 state로 저장 state에 따라 UI를 어떻게 보여줄지 조건문 등으로 작성 2. 코드 import {useState} from 'react'; function App() { let [card, setCard] = useState(false); return( { if (card==true){ setCard(false) } else { setCard(true) }}> 카드 컴포넌트 보여주기 {card == true ? : ''} ) } function Card() { return( 카드컴포넌트 ) } 우선 Card 컴포넌트를 만들어주고 먼저 card라는 state를 만들고, 그 안에다가 false 값을 넣어줌.. reactjs에서 component로 편리하게 HTML덩어리 관리하기 1. 개요 컴포넌트는? 반복적으로 출현하는 HTML덩어리를 쉽게 생성할 수 있게 해주는 도구 커다란 페이지를 컴포넌트화 해두면 편함 자주 변경되는 UI를 컴포넌트화 해두면 편함 함수 만들고, return() 안에 HTML 담고, 형태로 쓰면 됨(도 됨) 함수 규칙은 다른 함수의 밖에 만들 것, 첫글자를 영어 대문자로 만들 것 2. 코드 function Card() { return( 카드임 ) } 이 코드는 Card라는 이름의 컴포넌트를 만드는 코드임 function 뒤에 컴포넌트의 이름을 쓰면 되고 return 뒤에 내가 컴포넌트로 만들고 싶은 HTML코드를 넣어주면 됨 function App() { return( ) } function Card() { return( 카드임 ) } 이런식으로 코드 짜면 .. reactjs 필수스킬, state 변경함수 동작원리 알아보기 1. 개요 state 변경함수는 기존state와 신규state가 동일하면 동작을 안함 이런 특징 때문에 state 변경함수 사용 시 주의사항이 있음 일반적인 문자열이나 숫자 데이터는 그냥 조건 없이 state변경 함수로 state 변경 가능 근데 array랑 object는 저장된 데이터가 아닌, [데이터를 감싸는 괄호]가 state와 연결되는 형태임 그래서 그냥 바꾸면 안되고 [...state명] 형태로 써줘야함 대괄호 열고 점(.) 3개 찍고 state명 입력하고 괄호 닫아줘야 한다는 뜻임 이렇게 하면 array의 괄호를 벗기고 새로운 array를 만들어줌 (기존의 array와 별개의 array가 만들어진다는 뜻) 이거 안하면 기존state와 신규state가 동일한 걸로 인식됨 (괄호 안에 들어있는 데.. reactjs의 꽃, state를 알아보자 1. 개요 state가 뭐냐면 변수랑 거의 똑같음 변수는 수정되어도 html에 바로바로 반영이 안됨(재랜더링 안됨) state는 수정되면 html에 바로바로 반영 됨(재랜더링 됨) 하나의 페이지에서 모든 것을 보여주는게 리액트의 특징임 그래서 페이지 재랜더링 없이도 현재 페이지에서 보여주는 값을 바꿀 수 있어야 하기 때문에 state를 씀 2. state 사용 방법 import {useState} from 'react'; 위 코드를 상단에 적어줘야 함 let [a,b] = useState(데이터); 위 코드를 function 안에다가 넣어주면 됨 그럼 이제 state를 쓸 수 있게 되는 것. a는 변수명처럼 쓰면 되고, b는 state 변경을 도와주는 함수 데이터는 어레이([’ㄱ’, ‘ㄴ’, ‘ㄷ’]) .. reactjs 속의 HTML, JSX 문법 알아보기 1. 개요 JSX는 리액트에서 레이아웃 만들때 씀 자바스크립트를 확장한 문법인데 JS랑 HTML을 섞어놓은 형태임 HTML이랑 다른건 브라우저에 바로 보여줄 수 없고 빌드 과정을 거쳐야 랜더링 가능한 점 app.js파일에다가 JSX코드 작성하면 됨(나중에 이걸 빌드해서 HTML파일로 바꿀거임) 시작하기 전에 div태그만 남기고 다 지웁시다(아래 처럼 만들면 됨) import logo from './logo.svg'; import './App.css'; function App() { return ( ); } export default App; 2. CSS 적용하기 app.css파일에 css코드 작성하면 됨 import './App.css'; css파일을 app.js에 적용하려면 위 코드를 입력해서 css파.. 남들 다쓴다는 ReactJS 설치하고 셋팅해보기 1. 개요 다들 리액트 씀 리액트 설치하고 프로젝트 셋팅하기 2. 특징 리액트로 SPA(Single Page Application)을 쉽게 만들 수 있음 SPA는 이름 그래도 하나의 페이지(Single Page)만 보여주는 방식 하나의 페이지를 로딩하고, 그 안에 들어있는 데이터만 바꿔서 새로운 컨텐츠를 보여줌 html 재사용이 편리함(HTML을 변수에 담아서 쓸 수 있음) (= 컴포넌트) 앱도 만들 수 있음 (= 리액트 네이티브) 3. 설치방법 우선 nodejs 설치해야 함 2023.01.19 - [코딩/NodeJS] - 백엔드 공부를 위한 NodeJS 알아보기 + 설치 백엔드 공부를 위한 NodeJS 알아보기 + 설치 개발자가 되고 싶은 사람이라면 프론트엔드와 백엔드라는 단어를 들어봤을 건데 궁금해서.. 이전 1 2 3 다음