하이하이 반갑습니다 다들 명절 잘 보내셨는지요. 명절 나흘에 휴가 하나 붙여서 닷새를 쉬고 나니 정말 일상으로 돌아오기 너무 힘드네요. 수업 중에 더 많이 졸게 된 것 같습니다,,, 저번 포스팅 이후로 타입스크립트, 정규식, 알고리즘 등에 조금 신경을 쓰느라 리액트 강의를 많이 듣지는 못했습니다만, 강의 후반부의 분량이 워낙 많기도 하고 배운 내용이 어느 정도 쌓였다고 판단돼서 돌아왔습니다.
공부 외의 근황은 뭐 딱히 없습니다. 명절에 동네 친구들을 잔뜩 만나서 신나게 놀았구요, 국민취업지원제도 상담도 한 차례 받고 왔습니다. 두 번 더 남았는데 얼른 마치고 지원금 받고 싶습니다,,, 예비군은 올해로 5년 차에 들어서면서 작계훈련 통지가 왔구요.
와 제가 연초부터 치과치료를 받고 있는데 새해 들어서 쓴 글에 한 번도 언급한 적이 없네요. 치과치료도 잘 받고 있습니다. 신경치료 하는 어금니가 하나 있고 그거 말고 충치 몇 개,,, 의사 선생님이 스케일링 해주시면서 양치를 참 잘 하는데 충치가 왜 생겼는 지 의문이라고 하시니 괜한 오해는 없길 바랍니다,,
사설은 이쯤하고 배운 거 함 써봅시다.
우선 부트스트랩입니다. html과 css, 바닐라 js에선 부트스트랩 쓰려고 하면 cdn 방식으로 코드 몇 줄 복붙하고 끝이였다면 리액트는 다릅니다.그쵸 애초에 html 파일이나 js 파일을 정확히 쓰는 게 아니기 때문에,,, 그럼 어떻게 하냐!고 묻는다면 그냥 https://react-bootstrap.netlify.app/ 여기 들어가서 하란 대로 하면 되는 것 같습니다. npm으로 터미널에서 뭐 설치하고 쓸만한 디자인 갖다 쓰고 ~ 뭐 그런 거 아니겠습니까 이건 이만치 하고 패스,,
그 다음으론 이미지 넣는 법입니다. div 태그를 하나 만들고 거기에 css로 background-image : url() 속성을 주는 게 가장 기본인 것 같구요, div 박스에서 이미지가 어긋나면 background-size: cover; 속성을 주고, 이래도 이미지가 좀 치우쳐졌다 싶으면 background-position: center;까지 주는 걸로,,,,,하는 줄 알았으나!! 다른 방법이 있다는 거~
왜 우리가 그 동안 src 폴더 안에 있는 App.js에서 메차쿠차 하고 있었잖아요? 위에 말한 것처럼 해서 이미지를 넣는 것도 좋은데 그건 App.css에서 하는 일이고~ 근데 그건 귀찮으니까 App.js에서 좀 끝내고 싶은데~ 라고 한다면
같은 src 폴더 내에 이미지를 두고(그 안에 따로 폴더를 만들든 말든) App.js에서 import 해와서 쓰면 됩니다. 이 방법은 이렇게 대충 설명하고 말 건데요. 왜냐, 결국 다른 방법 쓸 거니까. 아니 이미지를 한 천 개 정도 쓴다 생각해보면 import 만 천 줄이라는 소린데 그걸 하겠습니까.
결국 우린 public 폴더를 사용하게 됩니다. 여기에 이미지를 두고(그 안에 따로 폴더를 만들든 말든) 갖다 쓰는 법인데요, 그냥 쓰면 안된답니다.
이런 식으로 이미지가 있는 경로 앞에 process.env.PUBLIC URL 이라는 복잡한 내용을 추가해줘야 합니다. 저 코드 자체가 무슨 의미인지는 모르겠으나 써야하는 이유는 분명한데요, 대충 홈페이지의 url이 abcd.com 이라고 할 때 저 url 자체에선 public 폴더 안에 있는 이미지를 가져다 쓰는데에는 문제가 없습니다. public 폴더에 있는 이미지를 쓴다는 건 abcd.com/이미지경로 와 같은 의미거든요. 근데 서브경로를 쓰게 되면 url이 abcd.com/서브경로/이미지경로 와 같이 변해서 그 때마다 코드를 수정해야 하는 불상사가 일어나게 됩니다. 그래서 그걸 방지하고자 저런 어려운 코드를 쓴다고 하네요. 사실 무슨 말인지 정확히 파악하기 어렵지만 일단 쓰는 방법은 기똥차게 알았으니 패스,,,,
그 다음은 import 와 export 입니다. 이거 어디여 저 es6에서도 한 것 같다 그쵸. 한 파일에서 변수 만들고 데이터 내리적고 뭐 하다보면 너무 더럽고 보기 안 좋으니까 길고 복잡한 데이터를 다른 js 파일에 넣어두고 가져다 쓰는 문법입니다. data.js라는 데이터용 파일을 만들고, 그 안에 필요한 데이터를 넣어놓습니다. 그리고 export 해주면 되는데요
이렇게 한 뒤엔 이 데이터를 쓸 파일에 가서 import 해주면 되겠지용
"import 내가 해당 파일에서 데이터를 담을 이름 from 데이터가 담긴 파일 경로"
로 적어주시면 됩니다. 이 경우에는 data.js에서 변수 하나만 가져왔는데요, 여러 개의 변수를 export 하고 import 한다면 "export{변수명1, 변수명2}"
이런 식으로 default를 빼고 export 해주시고 import 할 때고
"import {변수명1, 변수명2} from 데이터가 담긴 파일 경로"
로 해주시면 됩니다. 여러 개의 변수를 가져올 땐 export 한 파일에서 쓰는 변수명을 그대로 써야합니다. 일반 자료만이 아니라 함수도 export 할 수 있는데요, 그 말인 즉 컴포넌트도 따로 파일을 만들어서 import 하는 식으로 쓸 수 있다는 것이겠지요. 아니 그럼 props를 쓰는 경우에는?! 다른 파일에서도 마음대로 props를 쓸 수 있나?? 라고 물어보신다면 가능합니다~
이게 우리가 쓰던 App.js 파일이구요, 딱 봐도 Detail이라는 컴포넌트를 가져온 것 같습니다. 그쵸. 그럼 Detail 컴포넌트는 어디있냐!고 물으신다면
이렇게 잘 있습니다. 코드 전체와 디렉토리를 한 번에 담느라 글씨가 모래알 만큼 작군요. 맨 아래 보면 export default로 잘 내보내주고 있고 컴포넌트 함수의 매개변수로 props도 잘 전달되어 있습니다. 이전 이미지에서 Detail 컴포넌트를 쓸 때를 위한 props 문법도 잘 지켜지고 있구요.
그리고 지금 쭉 보여드리는 코드들이 이전 포스팅에 있는 코드랑 다른 프로젝트라는 걸 말을 안 했네요,,ㅎㅎ,,, 이전에는 블로그와 같은 느낌의 프로젝트였다면 이번엔 쇼핑몰 같은 느낌의 프로젝트를 하고 있습니다. 대충 보여드리면
하핫 귀엽지요 강의에선 뭐 신발 쇼핑몰 느낌으로 신발 이미지 막 넣고 그러는데 너무 재미없고 칙칙하길래 제 나름대로 커스텀을 해봤습니다. 이제 보니 저 위에 내브바를 봇치 핑크색으로 바꾸는 게 좋겠군요.
자 이제부터 살짝 통곡의 벽인데요, 라우터가 나오기 때문입니당. 우선 라우터, 혹은 라우팅이 뭘까요. 대충 경로 배정이라고 생각하시면 좋겠네요. naver.com 에서 naver.com/blog나 naver.com/cafe, 혹은 naver.com/blog/234 처럼 경로를 배정하는 기능인데요, 보통은 각 주소에 맞는 html 페이지를 만들어 놓고 요청이 올 때 그에 맞는 페이지를 보여주는 식으로 라우팅을 한다고 합니다. 그치만 리액트의 라우팅은 방식이 조금 다른데요, 리액트는 빌드된 후에 index.html 하나만 사용하기 때문에
1. 컴포넌트를 만들어서 페이지 내용을 채워놓고
2. 라우팅 경로로 들어오면 해당 컴포넌트를 보여줌
과 같은 절차를 밟는다고 합니다.
리액트에 내장된 어떤 문법을 사용하진 않구요, react-router-dom 이라는 라이브러리를 사용합니다. 라이브러리를 사용하는 건 달달 외울 필요 없고 그냥 라이브러리 만든 곳 가서 문서 읽고 쓰는 거다-라는 강사의 말을 믿어보며 일단 그래도 배운 내용을 적어보겠습니다.
우선 npm install react-router-dom@6로 설치해주시고,,, index.js로 가서 <App/>을 <BrowserRouter></BrowserRouter>로 감싸주고,,, 그런데 <BrowserRouter></BrowserRouter>를 쓰려면 react-router-dom에서 import 해줘야 하는데 이건 자동으로 되는 것 같고,,
다시 App.js로 돌아와서
import {Routes, Route, Link} from 'react-router-dom'
해주시고,,,, 사실 이렇게 보니 쉽네용 이제 Routes와 Route를 쓰기만 하면 되는데요,
<Routes>
<Route path = "/" /> ==>> 메인페이지 접속시 뭘 보여주고 싶다면 슬래시 하나로,,
<Route path = "/접속경로" element = {상세페이지에 들어갈 html} />
</Routes>
이런 식으로 사용해주면 됩니다. element의 중괄호 안에는 컴포넌트든 그냥 html 태그든 다 들어갈 순 있는데 여기서도 병렬적인 html 은 안된다는 점만 유의하면 될 것 같습니다. 실제로 사용한 코드는
대충 이렇게 생겼습니다. 다른 코드들이 섞이니 영 복잡해보이네요. 위에서 import한 요소 중에 Link에 대한 설명이 빠졌는데 얘는 뒤에 나올 useNavigate()로 갈음돼서 패스,,,
이 정도가 라우팅의 가장 기초가 되는 부분이구요, 이번엔 navigate, nested routes, outlet을 배워봅시다. 우선 import를 더 해봅시다.
import {Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom'
정도로 해주고 함 써볼게용. useNavigate는 html의 a태그와 같은 역할을 해줍니다. 말로 설명하는 것보다 코드로 보는 게 훨씬 이해가 빠른 문법인데요
이렇게 씁니다. html 태그의 속성으로 onClick을 넣고, 그 안의 화살표 함수의 콜백함수로 사용합니다. 전달되는 인자는 라우팅 될 주소구요. 이제 저 Home 이라던가 Detail을 클릭하면 abcd.com 혹은 abcd.com/detail로 라우팅됩니다. 아 그리고 useNavigate()의 인자로 1, -1과 같은 수가 전달될 수 있는데요, 1은 앞으로 가기, -1은 뒤로가기로 동작합니다. -2 누르면 뒤로 가기 두번임 근데 이거 쓸 일이 있나,,,??
자 그 다음은 nested routes입니다. 왜 그 동안은 서브경로가 하나인 주소만 적었지요 /detail 이라던가 /about이라던가,, 근데 /detail/132 이나 /about/location 과 같은 중첩된 서브경로로도 라우팅 할 수 있어야겠지요? 그럴 때 쓰는 게 nested routes입니다. 쓰는 방법은 간단합니다.
<Route path='/about' element = {<h1>안녕하세요 about 입니다.</h1>}>
<Route path='1' element = {<h2>안녕하세요 about의 첫번째 서브경로 입니다.</h2>}/>
<Route path='2' element = {<h2>안녕하세요 about의 두번째 서브경로 입니다.</h2> }/>
</Route>
Routes가 아닌 Route를 부모 자식 태그처럼 감싸주면 되는데요 이러면 /about/1이나 /about/2와 같은 주소로 라우팅이 가능해집니다. 그런데 여기서 또 신기한 일이 일어납니다. 이렇게 중첩된 Route는 부모 Route의 element와 자식 Route의 element가 모두 보이게 됩니다. 무슨 말이냐 하면
abcd.com/about으로 들어가면 "안녕하세요 about입니다."가 보이는데 abcd.com/about/1로 들어가면 "안녕하세요 about입니다."와 "안녕하세요 about의 첫번째 서브경로입니다." 까지 보인다는 말입니다.
근데 여기서 한 번 더 꺾어서 사실 그렇게 안 보입니다. nested routes가 부모 자식 태그의 모든 요소를 보여주는 건 맞는데 그건 <Outlet>을 써야 그렇다는 것,,, <Outlet> 태그는 자식 Route의 element가 들어갈 자리를 암시하는 태그인데요, 대충 써보자면
<Route path='/about' element = {<><h1>안녕하세요 about 입니다.</h1><Outlet></Outlet></>}>
<Route path='1' element = {<h2>안녕하세요 about의 첫번째 서브경로 입니다.</h2>}/>
<Route path='2' element = {<h2>안녕하세요 about의 두번째 서브경로 입니다.</h2> }/>
</Route>
이렇게 해줘야 저 위 위 문단에 쓴 것처럼 작동한다는 사실. 중복된 요소로 페이지를 꾸미고 그 안의 자잘한 요소만 바뀌는 동적 페이지를 만들 때 요긴할 것 같군요,,,
그 다음은 url 파라미터를 사용하는 법인데요, react-router-dom의 기능 중 하나구요 이 쯤 되면 귀찮으니까 코드로 대충 갈음하고 넘어갑시다
`
이 외에도 styled-components라는 것을 배웠는데 이건 당장 안 쓸거라 필기만 넣어두고 패스,,,
어후 길다 길어 오늘은 코드 캡처한 게 저번보다 적은 것 같네요 귀찮음의 척도인 것 같기도 하고,,, 아직 배운 내용의 두 배 정도 분량이 남아있는데 언제 끝내나 싶습니다. 곧 있음 여기 하나로에서도 리액트 강의를 시작하는데 독고다이는 끝나지 않습니다,,, 그럼 20000
아 그리고 오늘은 끝까지 읽을 필요 없으니까 우리 만의 암호는 없는 걸루,,,
'JavaScript > React' 카테고리의 다른 글
| 리액트 멸망전 2부(完) (1) | 2024.02.22 |
|---|---|
| 리액트 멸망전 1부 (3) | 2024.02.21 |
| React 기초 문법 (1) | 2024.02.02 |
