Mo's Develog

오늘은 Lifecycle이랑 useEffect라는 함수에 대해 알아봅시다. Lifecycle 이라는 개념이 있는데 실은 별거아닙니다. 이걸 배우는 이유는 componentDidMount() 이런 유용한 Lifecycle 함수들을 쓰기 위해서 배우는겁니다. 요즘 사람들은 저렇게 긴 함수 안쓰고 useEffect() 라는 깔끔한 함수를 사용하기 때문에 우리도 그걸 알아봅시다. 컴포넌트의 인생 여러분이 만들어쓰고있는 컴포넌트는 Lifecycle이라는 개념이 있습니다. 컴포넌트도 인생이 있다는겁니다. 컴포넌트는 생성이 될 수도 있고 (전문용어로 mount) 재렌더링이 될 수도 있고 (전문용어로 update) 삭제가 될 수도 있습니다. (전문용어로 unmount) 우리 인생 살기도 힘든데 컴포넌트의 인생 알아서 ..

컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생기는데 1. class 만들어놓은걸 까먹고 중복해서 또 만들거나 2. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나 3. CSS 파일이 너무 길어져서 수정이 어렵거나 이런 경우가 있습니다. 그래서 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수도 있는데 styled-components 라는 인기 라이브러리를 설치하여 이용하시면 됩니다. 일단 설치부터 해봅시다 터미널 열어서 npm install styled-components 해주면 됩니다. 그리고 사용하고 싶은 컴포넌트 맨위에 이런걸 import 해와야합니다. Detail.js 파일 위에 ▲ 위처럼 입력해서 import 하시면 셋팅 끝 styled-components 기본적인 사용법 이 라..

쇼핑몰같은 경우 상세페이지가 엄~청 많을 겁니다 그럴때는 어떻게 해야할까요? 상세페이지 여러개 만들려면 그럼 이렇게 코드짜면 되겠군요. 쓰면 페이지하나 만들 수 있다고 했으니까... 를 3개 만드는겁니다. 그럼 페이지 3개 완성 path 작명시 슬래시 기호도 맘대로 사용가능한데 단어간 띄어쓰기용으로 많이 사용합니다. 근데 상품이 100만개라면 도 100만개 만드는건．．． 그건 너무 미친짓이므로 다른 방법을 사용합니다. 페이지를 여러개 만들고 싶으면 URL 파라미터라는 문법을 사용가능합니다. path 작명할 때 /:어쩌구 이렇게 사용하면 "아무 문자"를 뜻합니다. 그래서 위의 는 누군가 주소창에 /detail/아무거나 입력했을 때 컴포넌트 보여달라는 뜻입니다. 이제 그럼 /detail/0 /detail/1..

오늘은 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..

html 안에서 src 폴더의 이미지를 넣고 싶으면? html 안에서 이미지를 집어넣고 싶으면 이미지를 import 해오고 사용해야합니다. 1. import 작명 from './이미지경로' 한 다음에 2. 이미지경로가 필요한 곳에서 작명한걸 사용하면 됩니다. 태그 쓰고싶으면 이렇게 써도 보입니다. 귀찮으면 css파일을 활용합시다. public 폴더의 용도 여러가지 소스코드는 src 폴더에 보관하면 되는데 이미지같은 static 파일의 경우 public 폴더에 보관해도 됩니다. 리액트로 개발을 끝내면 build 작업이라는걸 하는데 지금까지 짰던 코드를 한 파일로 압축해주는 작업입니다. src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해줍니다. 그래서 형태를 보..

자식 컴포넌트가 부모 컴포넌트에 있던 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을 앞에..