dev_0hoon

어떤걸 컴포넌트로 만들면 좋은가? 1. 반복적인 html을 사용할 때 2. 큰 페이지들 3. 자주 변경되는 것들 단점 - state를 가져다 쓸 때에 다른 함수에 들어있으면 부를 수가 없다. //방식 1 const Modal = () => { return ( 제목 날짜 상세내용 ) } Modal = 'asd'; //const로 만들면 좋은 이유는 만약 다른 작업자가 실수로 Modal = 'asfas'로 바꾸어도 바뀌지 않음 //방식 2 function Modal(){ return( 제목 날짜 상세내용 ) }

function App() { let post = "강남 우동 맛집"; let [글제목,b] = useState("남자 코트 추천"); return ( 블로그임 {글제목} 2월 17일 발행 ); } 위처럼 useState라는 함수를 통해 데이터를 보관하며 [a,b] 중에 a를 중괄호에 넣어 {a}로 사용한다. state는 변경할 때에 b를 사용한다. b는 변경해주는 function이다. 주의할 점은 기존 변수가 신규 변수가 아닐 경우 변경이 안된다 그래서 let copy = [...글제목] 으로 카피문법을 사용한 후에 변경이 가능하다 참고 코드 import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; funct..

.js 파일 안에서는 JSX를 사용한다. (그냥 html 쓴다고 생각하면 됌) 1 . JSX에서는 class는 문법이므로 실제로 html의 class 속성은 className으로 넣어줘야한다 2. 데이터를 저런 js문법으로 길게 값을 넣지 않고 {} 중괄호를 사용한다. 3. 만약 스타일을 넣으려면 이렇게 오브젝트 문법으로 넣어줘야 한다.(만약 font-size를 사용한다면 fontSize로 해야한다. 여기는 js이다 카멜케이스로 써줘야한다)

일단 node.js 를 설치한다 그 뒤에 바탕화면에 폴더를 만들고 폴더 우클릭 -> 터미널 열기를 클릭한다 그 뒤에 npx create-react-app (프로젝트명) 입력한다. npx create-react-app react_study 비주얼 스튜디오를 통해 다운받은 react 앱을 시작해보자 상단의 터미널 -> new 터미널을 열어준다 명령어로 npm start라고 입력 해준다. 방금 위에 한 것은 그냥 react코드를 쳐도 되지만, create_react_app이라는 라이브러리를 받아서 쓰는 것이 시간이 훨씬 절약된다.(이게 일반적인 방법이랜다) https://create-react-app.dev/ Create React App Set up a modern web app by running one ..

리액트에서는 태그의 Attribute처럼 속성을 붙일 수 있는데 이걸 리액트에서는 props 라는게 있는데 홈페이지에 가보면 개발문서에 컴포넌트와 프롭스에 대해 사용 할 수 있도록 정리 되어있다. 사용법은 나와있지만 정리해보려 한다 일단 내가 만든 컴포넌트 태그에 값을 넣어준다 그런 뒤에 원래 값이 들어가는 곳에 자신을 가르키는 this 그리고 프롭스라는 뜻에서 this.props 마지막으로 속성값의 이름을 적어 주면 컴포넌트 태그에 걸어둔 프롭스 값이 들어가게 된다. 이렇게 태그를 2개 입력해주면 속성값에 따라 내용이 바뀌는 것을 확인 할 수 있다.

이런 html 태그가 있다고 했을떄에 header 태그안에 있는 것이 1억개의 태그로 이루어져있다면 그 태그들은 어딘가에 감쳐두고 하나의 태그로 그것을 의미할 수 있다면 얼마나 좋을까? 그걸 해결하는 것이 컴포넌트이고 그 컴포넌트들을 사용할 수 있게 하는 것이 리액트의 기능이다. 위쪽에 class인 Subject를 만드는데 리액트의 클래스 Component를 상속 받고 꼭 render() 함수안에 return 값으로 넣고 싶은 html 코드를 만들어준다. 아래에 App 클래스에 div박스 안으로 Subject 태그를 넣어주면 끝 여기서 거의 유사 javaScript언어 같아 보이지만 실제로 클래스 Subject는 javaScript으로만 돌릴때는 문법상 틀려 오류를 일으키는데 리액트에서 사용할 수 있는 ..

리액트를 본다면 아무것도 하지않았으매 리액트 자체에 좋은 개발환경을 위해 짜놓은 것으로 인해 1.7MB이라는 큰 용량으로 잡혀있다 그렇기에 배포할 때에 한번 빌드를 통해야한다. 터미널에 npm run build를 입력해주면 이렇게 build 라는 폴더가 생성되는데 이곳에 html css js 의 형태로만 파일이 남게 되는데 리액트에서 불필요했던 것들을 정리해서 용량을 줄인 폴더의 형태로 만들어준다 그런 뒤에 index.html을 그냥 여는 것이아닌 터미널에 npx serve -s build 적어주면 npx로 한번씩 사용할 수 있는 웹사이트 서버를 만들어준다 용량이 굉장히 줄어든 것을 확인 할 수 있다.

index.js파일안에 import를 살펴보면 ./index.css가 있다 경로를 찾아가 보도록하자 이렇게 index.js에 import 되어있는 css는 현재 index.html에 전체 css라 볼 수 있다. (아직까지 짐작에는 index.js는 html로 진입 전에 값을 받는 도구라고 생각된다 마치 스프링에서는 디스패처서블릿 같은 존재? 또는 컨트롤러 같은 존재같다) 그리고 index.js에서 컴포너트 값을 받은 App.js또한 css를 가지고있는걸 확인 할 수 있는데 이곳의 css는 컴포넌트의 디자인이 된다. 아래에 컴포넌트 값들에 css를 심어주는 import라 생각하면 된다.