React (16) 썸네일형 리스트형 JSX REACT 문법 3가지 핵짧음. JSX란 JAVASCRIPT의 라이브러리의 일종이다. 문법 1 Class 넣을땐 className=" " 이렇게 사용되어진다. 문법 2 변수를 선언하고 넣을땐 { 변수명 } 중괄호안에 넣어준다. 문법 3 style 변경시 { { fontSize: "2vw" } } 이런식으로 작성해준다. 여러개 작성시 { { fontSize: "2vw" , color: "red" } } 리액트 훅??? useState 초간단 설명 지난번 작성한 글에 있는 useState에 관해 진짜 초초 간단한 설명을 하려고 한다. 뭔가 머리를 댕하고 맞은듯한 느낌이랄까? 결국엔 useState 는 변수를 저장해주는 저장 공간과도 같은것이다! 자바스크립트에서는 보통 let posts = '리액트가뭔데'; 위처럼 변수를 선언해주고 그안에 값을 넣는 방식인데 그것과 동일하다고 생각하면된다. 대신 아래 코드를 맨 상단에 꼭 추가 해줘야한다. (나 이 함수쓴다!라고 선언하는것) import React, { useState } from 'react'; 그리고 대신 중요한 한가지는 useState에는 [ a , b ]라는 공간이 있다. 이 공간은 a 는 타이틀고유값 , b 타이틀변경값 이라는 점이 특이한 점이다! a라는 공간에 있는 고유값을 b 라는 타이틀.. React Node.js 왜깔아야 하는데? React 환경 세팅하기 초초간단 나는 오랜시간 리액트에 왜 Node.js 를 깔아야 하는데? 라고 생각했는데 드디어 확실히 와닿는 이유를 찾았다!!!!!!!!!!!!! 간단히 말하면 React를 실행하기 위한 셋팅이라고 생각하면 된다. 구동시켜줄 환경을 만드는것! 그래서 Node.js를 깔고 작업을 시작해주면된다. https://nodejs.org/en 여기서 client를 다운로드받기 다운로드 후 아래코드 작성. npm install -g create-react-app app . 현재 폴더에 설치하겠다는 뜻이다 npx create-react-app . 만약 현재 폴더에 다른 폴더명으로 시작하고 싶다면 아래 코드처럼 입력하기. npx create-react-app reactsite01(폴더명) 혹시 이렇게 쳤는데 빨간색 Error 가 .. React-Router-Dom 개념 Routing - 라우팅은 우편배달기사가 집집마다 배달하듯이 지정된 곳에 배달해주는 것. 즉 지정된곳에 콘텐츠를 이동시켜주는것이다. React-Router를 사용하는 이유 그냥 a 태그를 사용하면 페이지 전체가 새로 로딩된다. 화면 깜빡임이 필수적으로 발생하고 이는 사용자 경험을 떨어뜨리는 큰 요인이다. 따라서 라우팅을 통해 부드러운 화면전환을 위해 사용된다. Router 종류 BrowserRouter : 별도의 서버 설정이 없다면 새로고침 시 404에러가 발생한다. :큰 프로젝트에 적합하다. :서버가 존재하고, SEO가 필요한 프로젝트라면 BrowserRouter를 사용하는 것이 좋다. React-Router-Dom React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리이다... react 설정 하기 (리액트 환경 구축하기) ❔ React란? React는 UI를 더 쉽게 만들기 위한 JS 라이브러리라고 한다 단순히 UI를 쉽게 만들기 위해서 개발된 라이브러리. 그리고 '복잡한 태그들(태그들의 조합)을 사용자 정의 태그로 묶어서 다른 파일에서 사용하면 편하지 않을까?' 라는 생각에서 나온 개념이 바로 React라고 합니다 사용자 정의 태그 'Component' : React에서는 사용자 정의 태그를 'Component'라고 부릅니다 Component 사용의 장점 : 가독성↑ / 재사용성↑ / 유지보수가 용이 / 코드 복잡도↓ Toolchains : 개발자의 목표에 따라 필요한 개발환경, 도구 이런 것들을 모아서 한 번에 제공해주는 도구를 "Toolchain"이라고 부른다. npm : npm은 JavaScript 런타임 환경 N.. useEffect( ) 란 ? * useEffect( ) 는 변수값, 오브젝트등이 달라지면 그것을 인지하고 변경해주는 함수이다. * useEffect( ) 는 콜백함수를 가지며, Dependency는 있을수도 없을수도 있다. * useEffect( ) 는 무조건 한번 실행된다. 리액트 훅이다. 결과론 적으로 보면 로딩하는데 시간이 많이 걸리는 함수나, 서버에서 가져와야하는 데이터, 타이머들을 useEffect 안에 작성해주면 조금더 사용자가 느끼기에 빠르다 라는 느낌을 줄수있다. html이 먼저 작동하고 그 이후 useEffect안에 있는 코드가 작성되니까! 종류와 쓰임새로는 > useEffect( ( ) => { } ) 시시때때로 사용되어져서 불필요한 것까지 인지하는 단점이 있음. > useEffect( ( ) => { }[ ] ).. 이전 1 2 다음