Mo's Develog

오늘은 navigate() 함수와 간단한 프로젝트에선 쓸데없는데 가끔 쓰는 nested routes라는 기능을 알아봅시다. 리액트 프로젝트 폴더구조는 리액트는 그냥 html 이쁘게 만들어주는 쪼그만한 라이브러리일 뿐입니다. 그래서 여러분이 만들 파일들은 95% 확률로 .js 파일이기 때문에 비슷한 .js 파일끼리 한 폴더에 묶어놓으면 그냥 그게 좋은 폴더구조입니다. 컴포넌트 역할하는 js 파일은 components 폴더에 묶고 페이지 역할하는 js 파일은 routes 아니면 pages 폴더에 묶고 자주 쓰는 함수가 들어있는 js 파일은 utils 폴더에 묶고 하면됩니다. 우선 상단에서 이런 것들을 import 해옵시다. 1. 페이지 이동기능을 만들고 싶으면 useNavigate() 씁니다. useNavi..

페이지를 나누고 싶으면 일반 html css js 사이트는 그냥 html 파일 여러개 만들면 그게 하나의 페이지인데 근데 리액트는 html 파일을 하나만 사용합니다. 그래서 리액트에선 누가 다른 페이지 요청하면 그냥 내부에 있는 를 갈아치워서 보여주면 됩니다. 근데 직접 코드짜면 귀찮으니 react-router-dom 이라는 외부 라이브러리 설치해서 구현하는게 일반적이라 그렇게 해봅시다. react-router-dom 설치하려면 외부라이브러리라서 설치 셋팅하는 법은 react-router-dom 홈페이지 들어가서 그대로 따라하면 되는데 방법은 터미널 열어서 npm install react-router-dom 입력해서 설치합니다. setting은 index.js 파일로 가서 ▲ import BrowserR..

데이터가 많다면? 상품데이터를 3개 준비해왔는데 이걸 html에 보여줍시다. 하단 자료를 state에 보관해놓고 html에 데이터바인딩해보도록 합시다. 실제 서비스였으면 서버 이런데서 받아왔겠지만 서버가 없으니 대충 서버에서 보낸 것이라고 생각합시다. 어려워 보이지만 별거 아닌데 [array자료]에 상품정보가 3개 들어있을 뿐입니다. 근데 상품정보가 너무 길고 복잡해서 {object자료} 에 넣어뒀을 뿐입니다. 그래서 축약하면 [ { }, { }, { } ] 이렇게 생긴것이죠 export default / import 문법 근데 위에 있던 상품정보들을 state로 만들고 싶은데 useState() 안에 넣기엔 너무 깁니다. 그럴 땐 다른파일에 보관했다가 import해올 수도 있습니다. 예를 들어서 dat..

자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면 그냥 쓰면 안되고 props로 전송해서 써야합니다. 뭔소린지 알아봅시다. 안에 글제목 state 가 필요한데 앞선 포스팅에서 만들어봤던 내부에 글제목 state를 집어넣고 싶으면 어떻게하죠? 예를 들면 이렇게 하면 될지않을까요? ▲ 하지만 제대로 실행되지 않습니다. '글제목'이라는 변수가 define 되지 않았다고 에러가 뜹니다. 왜냐면 글제목이라는 state 변수는 function App()에 있지 function Modal()에 없으니까요. 자바스크립트에선 다른 함수에 있는 변수를 마음대로 가져다쓸 수 없습니다. 근데 컴포넌트 2개가 부모/자식 관계인 경우엔 가능합니다. (다른 컴포넌트 안에 있는 컴포넌트를 자식컴포넌트라고 부릅니다) 부모..

똑같은 html이 반복적으로 출현하면 반복문을 이용해서 쉽게 똑같은 html을 생성할 수도 있습니다. 안타깝게도 for 반복문은 JSX 중괄호 안에서 사용할 수 없어서 map() 을 대신 사용합니다. 자바스크립트 map 함수 쓰는 법 모든 array 자료 우측엔 map() 함수를 붙일 수 있습니다. 자바스크립트 기본함수 중 하나입니다. 기능 1. array에 들어있는 자료갯수만큼 그 안에 있는 코드를 반복실행해줍니다. 위의 경우 console.log(1)이 3번 실행됩니다. 기능 2. 콜백함수에 파라미터 아무렇게나 작명하면 그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해줍니다. (그냥 소괄호안에 있는 함수를 콜백함수라고 합니다) 위의 경우 2, 3, 4가 콘솔창에 출력됩니다. 기능3. retu..

리액트에서 동적인 UI 만드는 step 동적인 UI가 뭐냐면 유저가 조작시 형태가 바뀌는 모달창 탭 서브메뉴 툴팁 경고문 등 그런 UI들을 의미합니다. html css로 미리 UI 디자인을 다 해놓고 UI의 현재 상태를 state로 저장해두고 state에 따라서 UI가 어떻게 보일지 조건문 등으로 작성 이렇게 코드짜면 완성입니다. 그래서 글제목 누르면 이게 뿅 등장하는 모달창 기능을 만들어봅시다. Step 1. html css로 미리 디자인 해놓기 지난 포스팅에서 사용했던 것을 사용하겠습니다. Step 2. UI의 현재 상태를 state로 저장 state 하나 만들고 거기에 현재 UI의 상태정보를 저장해두라는 소리입니다. 저는 modal이라고 작명했습니다. 영어로 작명시 state변경함수는 set을 앞에..

리액트에서 html코드를 짤 때 유의점이 있는데 return()안에 두개의 html태그 나란히 적기 이런거 안됩니다. return ( ) 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야합니다. 위와같은 것은 안된다는 것이죠. 그래서 굳이 두개를 나란히 적고 싶으면 저렇게 하나의 div로 또 감싸거나 해야합니다. 의미없는 div 쓰기 싫으면 이걸로 감싸도 됩니다. fragment 문법이라고 합니다. 복잡한 html을 한 단어로 치환할 수 있는 Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. Component라고 합니다. 이걸 이용하면 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있습니다. 위와 같..

array state는 어떻게 수정함? 이렇게 하면 됩니다. state 변경함수는 () 안에 넣은걸로 기존 state를 갈아치워주니까 저렇게 집어넣으면 됩니다. 약간 프로그래머 스타일로 다시 만들어보면 지금 코드는 확장성이 부족합니다. [ ] 안에 과일이 3개밖에 없어서 망정이지 100개 들어있으면 어쩔 것입니까 onClick 안의 코드도 매우 길어지겠군요. 그러니까 기존 state를 다 복붙하지말고 기존 state를 첫 글만 살짝 바꿔서 state변경함수에 집어넣는 식으로 개발해봅시다. 위와 같이 해도 됩니다. array 자료안의 X번째 항목을 변경하고 싶으면 array자료[X] = '바꿀값' 이렇게 하면 됩니다. 그래서 자료를 바꾸고 저기 state변경함수에 집어넣은 겁니다. 근데 이런거보다 더 나은..

State변경하는 법을 알아보기 전에 JSX에서 사용하는 간단한 이벤트사용법에 대해 알아보고 갑시다. 일반 html에서는 위와 같이 하면 됩니다. JSX에서는 위와 같이 합니다. 1. Click이 대문자인거 2. {} 중괄호 사용하는거 3. 그냥 코드가 아니라 함수를 넣어야 잘 동작한다는거 를 기억해주십시오. onClick={}안에 함수를 적는게 뭔소리냐? onClick={} 안에는 어디서 만든 함수명을 적거나 아니면 함수 하나를 바로 만들어서 집어넣어주시면 됩니다. 그래서 이러면 를 클릭시 함수안에 있던 자바스크립트가 실행됩니다. 이게 리액트에서 어떤 html 요소 클릭시 원하는 코드실행하는 법입니다. 근데 함수 만드는게 귀찮으면 이렇게 함수를 그 자리에서 직접 만들어버려도 가능합니다. Q. 함수만들 ..

변수에 잠깐 데이터 저장하고 html에 {데이터바인딩}도 할 수 있다고 했는데 중요한 데이터를 저장할 땐 변수 대신 state를 만들어씁니다. state는 왜 쓰는지, state는 어떻게 만들어서 데이터를 저장하는지 알아봅시다. state 만드는법 이전 강의에서는 그냥 let posts = '어쩌구' 이렇게 변수에 데이터를 저장했었는데 리액트에선 변수 말고 state를 만들어서 데이터를 저장해둘 수 있습니다. 이번엔 state를 이용해 데이터를 잠깐 저장해보도록 합시다. 맨 윗줄에 import {useState} from 'react' 하고 원하는 곳에서 useState('저장할 데이터') 쓰면 state에 자료를 잠깐 저장할 수 있습니다. 그리고 저장한 자료를 나중에 쓰고 싶으면 let [a,b] = ..