본문 바로가기

프론트엔드63

React, 만든 리액트 사이트 build와 배포 build를 해야하는 이유와 하기 전 체크사항 만든 사이트를 배포하려면 작업하던 App.js 파일 그대로 올리는 것이 아니라 build용 파일을 생성한 후 그 파일을 올려야 함 웹브라우저는 Html, CSS, JS 이 세개의 언어만 해석할 수 있음 그렇기에 리액트의 state, JSX 등을 전혀 해석할 수 없음 그래서 리액트 프로젝트를 build를 하면 브라우저 친화적인 Html, CSS, JS 파일로 바꿔줌 바꿔준 것을 웹에 올려야 사용자들이 사이트를 볼 수 있음 ※ 배포하기 전 체크할 사항 1. 미리보기 띄워봤을 때 콘솔창, 터미널에 에러 X warning 메세지는 사이트 구동에 별 영향이 없기 때문에 테스트할 때는 무시해도 됨 2. 사이트를 배포하실 때 http://hungry.com/ 이런식으로 .. 2023. 2. 16.
React, 많은 div를 반복문으로 줄이때 map 사용 map 똑같은 html이 반복적으로 출현하면 반복문을 이용해서 쉽게 똑같은 html을 생성할 수도 있음 for 반복문은 JSX 중괄호 안에서 사용할 수 없어서 map() 을 대신 사용 자바스크립트 map 함수 쓰는 법 모든 array 자료 우측엔 map() 함수를 붙일 수 있음 const array = [2,3,4]; array.map(function(){ console.log(0) }); //0 //0 //0 array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줌 const array = [2,3,4]; array.map(function(a){ console.log(a) }); //2 //3 //4 콜백함수에 파라미터를 작명하면 그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해줌 .. 2023. 2. 11.
React, 부모의 state를 가져다 쓰고 싶을때 props로 전송 Props 자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶다면 props로 전송해서 써야함 function App (){ let [글제목, 음식변경] = useState([ "바지락 칼국수 먹고 싶다", "대창 먹고 싶다", "초콜릿 먹고 싶다", ]); return ( ) } function Modal(){ return ( { 글제목[0] } 날짜 상세내용 ) } 실행해보면 '글제목'이라는 변수가 define 되지 않았다고 에러가 발생 왜냐하면 글제목이라는 state 변수는 function App()에 있는 것이지 function Modal()에 없기때문 JS에선 다른 함수에 있는 변수를 마음대로 가져다쓸 수 없음 하지만 컴포넌트 2개가 부모, 자식 관계인 경우에는 가능함 즉 컴포넌트(부모).. 2023. 2. 10.
React, 동적인 UI 만들기(모달창) 리액트에서 동적인 UI 만들기 Html Css 미리 UI 디자인 UI의 현재 상태를 state로 저장 state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 이벤트를 이용하여 모달창을 보이게 또는 안보이게 하기 하나씩 자세히 살펴보자면 1. Html CSS UI 디자인 function 함수명(){ return ( ) } //또는 let 함수명 = () => { return ( ) } 안에 내용을 넣어줌 2. UI의 현재 상태를 state로 저장 state를 하나 만들고 현재 UI의 상태정보를 저장 let [modal, setModal] = useState(false); //또는 let [modal, setModal] = useState('닫힘'); let [modal, setModal] = useS.. 2023. 2. 8.
React, Component 많은 div를 한 단어로 줄이기 fragment 문법 Html 코드짤 때 유의점이 있음. return ( ) 안에 두개의 html 태그 나란히 적기가 안됨 return ( ) 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야함 그래서 를 나란히 적고 싶다면 필요없는 로 감싸야함 이렇게 의미없는(필요없는) 가 싫다면 이걸로 감싸도 됨 복잡한 Html을 한 단어로 치환할 수 있는 Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공함 이것을 바로 Component라고 함 Component를 이용하면 함수 또는 변수 만들 듯 HTML을 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있음 function App (){ return ( ) } function 함수명(){ return ( ) } /.. 2023. 2. 7.
React array, object state 변경하는 법 array, object state 변경하기 state를 변경할때 array를 변경하면 state변경함수(새로운 state) let [좋아요, 좋아요변경] = useState(0); 좋아요변경(좋아요 + 1); 이런식으로 바꾸면 됬지만 array, object의 경우 let [글제목, 음식변경] = useState([ "바지락 칼국수 먹고 싶다", "대창 먹고 싶다", "초콜릿 먹고 싶다", ]); 음식변경(["비빔밥 먹고 싶다", "대창 먹고 싶다", "초콜릿 먹고 싶다"]); 식으로 변경해주어야 함 이유는 state변경함수는 ( )안에 넣은 걸로 기존 state를 변경해주기 때문 위에 예시처럼 인덱스 0번만 바꾸고 싶지만 기존의 내용이 다 없어지기 때문에 바꾸는 부분과 바꾸지 않는 부분을 다 명시해 .. 2023. 2. 3.
React에서 state와 버튼 기능개발 state ※ return() 안에는 병렬로 태그 2개 이상이면 빨간줄로 에러남 return() 안에는 병렬로 태그 2개 이상 기입금지. 즉 하나의 태그로 시작해서 하나의 태그로 끝내야함 중요한 데이터는 변수말고 state에 담기 자료를 잠깐 저장할 땐 변수를 사용 let hungry = "배고파"; const sugar = "당이필요해"; 하지만 일반변수 말고 state를 만들어서 데이터를 저장해 둘 수 있음 import { useState } from "react"; let [a, b] = useState("바지락 칼국수 먹고싶다"); let [글제목, c] = useState(["바지락 칼국수 먹고 싶다","대창 먹고 싶다","초콜릿 먹고 싶다"]); //[]를 이용하여 array하는 방법으로 여러.. 2023. 2. 2.
React 레이아웃 만들때 쓰는 JSX 문법 3개 JSX JSX란 JS안에서 Html을 쉽게 작성할 수 있게 도와주는 JS부가기능 혹은 언어 JSX를 쓰는 이유는 React에서 를 만들려면 React.createElement('div', null, 'Hello World')로 길게 써야함 하지만 JSX를 사용하면 쉽고 편하게 /로 쓰면 됨 JSX 문법 3개 JSX 문법1. class 넣을 땐 className Html처럼 코드를 작성하고 있지만 Html 코드를 작성하는 것이 아닌 JSX를 작성하고 있기 때문 Html공간이 아닌 JS공간에 코드를 작성하고 있어 class을 쓰면 class를 선언해달라는 문법이랑 겹치기 때문에 className이라고 써야함 온갖 곳에 { } 중괄호를 열어서 변수들을 집어넣을 수 있음 href, id, className, s.. 2023. 1. 31.
React 설치와 개발환경 셋팅 리액트 프로젝트 생성 자신이 원하는 프로젝트 만들기 원하는 지정 위치로 가서 터미널을 열고 npx create-react-app 프로젝트이름 프로젝트 생성. 에디터에 생성된 리액트 프로젝트를 열어 코드작성하면 됨 npx create-react-app으로 프로젝트를 생성한 이유는 html파일을 이용하여 react 라이브러리를 설치해도 되지만 복잡하고 시간이 오래 걸려 creact React App이라는 라이브러리에 도움을 받아 프로젝트 생성 npm은 라이브러리를 모아놓은 플랫폼. Node.js를 다운으로 npm도 사용할 수 있음. npm이 설치가 잘 되면 npx 명령어를 사용할 수 있음 ※ 버전 문제로는 전역설치가 안된다고 오류 npm 제거 -g 생성 반응 앱을 하여 없앤 후 다시 프로젝트 생성 ※ 프로젝.. 2023. 1. 30.