react

리액트에서 동적인 UI 만드는 step 1. html css로 미리 UI 디자인을 다 해놓고 2. UI의 현재 상태를 state로 저장해두고 3. state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 step 1. html css로 미리 디자인해놓기 function App (){ return ( (생략) ) } function Modal(){ return ( 제목 날짜 상세내용 ) } .modal{ margin-top : 20px; padding : 20px; background : #eee; text-align : left; } step 2. UI의 현재 상태를 state로 저장 state 하나 만들고 거기에 현재 UI의 상태정보를 저장합니다 예를 들어, 0과 1, true/false 등을 활용..

1. state 란? - state는 컴포넌트의 내부에서 변경 가능한 데이터를 다루기 위해 사용하는 객체이다. - 일반적으로 리액트에서는 유동적인 데이터는 변수에 담아서 사용하지 않고 useState()라는 리액트 함수를 사용하여 state라는 저장 공간에 담아 사용한다. 2. state 사용 방법 1. 파일 위쪽에 useState를 임포트 해준다. import { useState } from 'react'; 2. useState()를 선언한다. const [state, setState] = useState('보관할 자료'); 여기서 state는 '현재 상태값', setState는 'state를 업데이트하는 함수'를 의미한다. 보통 업데이트하는 함수는 앞에 set을 붙여 카멜케이스로 쓴다. 예를 들면 c..

1. JSX 란? "JSX(Javascript Syntax eXtension)는 Javascript를 확장한 문법" 2. JSX 문법 1. 반드시 부모 요소 하나가 감싸는 형태여야 한다 Virtual DOM에서 컴포넌트 변화를 감지할 때 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다. ex) 정상작인 코드 1. // div를 사용 하였기 때문에 스타일 적용시 작성한 코드를 div로 // 한번 더 감쌌다는 부분을 고려해야 한다. function App() { return ( Hello GodDaeHee! ); } ex) 정상 코드 2. () function App() { return ( Hello GodDaeHee! ); } 2. 자바스..

개발환경 셋팅 1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다. https://nodejs.org/en/download Node.js — Download Node.js® Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 더 자세한 사항은 해당 블로그를 참조!! https://devyihyun.tistory.com/166 [Node.js] Node.js 설치하기 / 노드js 설치하기 [Node.js 설치하기] ※ 본 포스팅은 윈도우 11의 환경에서 진행되었습니다. Node.js 공식 홈페이지 접속 Node.js Node.js® is a JavaScript runtime built on ..

우선 React를 들어가기에 앞서 React 왜 사용하는가? 를 알아보고자한다. 리액트의 정확한 용도를 알아야 리액트라는 라이브러리를 이해할 수 있는데, Naver Vibe, Flipkart, Instagram 이런 웹사이트 들어가면 페이지 전환 같은게 새로고침 없이 부드럽게 동작한다. https://vibe.naver.com/today https://www.instagram.com/ NAVER VIBE (바이브) #나만을 위한 음악이 듣고 싶을 땐 #내돈내듣 VIBE vibe.naver.com Instagram www.instagram.com 이런 사이트들을 Single Page Application 이라고 하는데 html 파일을 1개만 쓰고 다른 페이지를 보여주고 싶을 때 html 부분만 갈아치워서 ..