React

Module 이란? React를 개발하다보면 파일이 커지면서 여러 개의 파일로 나뉘게 되는데, 이 때 분리된 파일들의 이름을 모듈(module)이라고 한다. 모듈내에는 함수, 변수 등이 있습니다. 또, 다른 모듈안에 있는값을 불러오거나, 모듈 내에 있는 값들을 외부로 내보낼 수 있는데, 이때 사용하는 것이 import(불러오기), export(내보내기) 라고 합니다. import / export? 변수나 함수, 자료형을 다른 파일로 저장해둔 뒤에 불러오는 방법입니다. 1. data.js(원하는 데이터파일)을 export하고 2. App.js(불러와서 적용할파일)에 import를 하면 됩니다. 예를 들어 , data.js라는 파일이 있는데 거기 있던 변수를 App.js 에서 가져와서 쓰고 싶으면 (data..

리액트에서 동적인 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 등을 활용..

오늘은 Component 문법을 알아봅시다. Component 문법은 복잡한 html을 한 단어로 치환할 수 있는 문법입니다. 함수형 컴포넌트 생성하기 함수형 컴포넌트 function Modal(){ return ( 제목 날짜 상세내용 ) } ▲ 이렇게 하시면 원하는 HTML을 한 단어로 줄일 수 있습니다. 줄이는 법은 1. function을 이용해서 함수를 하나 만들어주고 작명합니다. 2. 그 함수 안에 return () 안에 축약을 원하는 HTML을 담으면 됩니다. 3. 그럼 원하는 곳에서 사용하면 아까 축약한 HTML이 등장합니다. Component 만들 때 주의점 1. component 작명할 땐 영어대문자로 보통 작명합니다. 2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 ..

1. onClick 사용법 리액트에서 click를 위한 이벤트 핸들러를 장착하기 위해서는 해당 코드에서 onClick를 선언해주고 { } 중괄호를 열어줍니. 중괄호를 열어주는 이유는 JSX 문법이기 때문입니다. onClick={} 안에는 어디서 만든 함수명을 적거나 아니면 함수 하나를 바로 만들어서 집어넣어주시면 됩니다. 또는 { 실행할코드 } }> 2. State 변경하는 방법 let [ count, setCount ] = useState(0); state만들 때 2개까지 작명할 수 있댔는데, 두번째 작명한건 state 변경을 도와주는 함수입니다. 그거 써야 state 변경이 가능합니다. 사용법은 setCount(새로운 State) 이렇게 쓰면 됩니다. 왜냐면 state 변경함수는 ( ) 안에 넣은걸로..

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 부분만 갈아치워서 ..