코딩/ReactJS (27) 썸네일형 리스트형 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 4 다음