1. Render 함수
상황) useState의 값을 전달하는 함수를 props로 넘겨주고 싶었고, 라우터가 설정된 경우 render 함수를 사용해야 했다. (App.jsx -> Homepage.jsx -> Header.jsx)
📍 문제의 내 첫 코드
<Route
render={()=>
{<Homepage
isLogin = {isLogin}
handleLogin = {handleLogin}
/>)}
}
/>화살표 함수로 전달하는 과정이었는데 { () => {리턴값} } 이렇게 썼다. 가장 밖에 있는 중괄호는 리액트 자바스크립트 문법을 사용하기 위해서 썼다. 그런데 props로 전달이 안되어서 어떤 점이 문제였는지 열심히 찾았고, 같은 회고팀 동료들도 도와주었다. 여기서 내가 한 실수는 리턴값 앞에 return을 주지 않았기 때문에 전달하려는 값이 가지를 못했던 것이다. { () => {return 리턴값} }
💡 내가 실수했던 이유
1. 자바스크립트 문법을 감싸는 { }중괄호에 순간적인 혼돈
2. 항상 값을 받아서 쓰던 습관으로 화살표 함수 안에 return을 사용하지 않고 습관적으로 바로( ) => { }이렇게 작성
그래서 이번 기획에 화살표 함수의 사용을 다시 정리했다.
1) 중괄호와 리턴(기본 공식) : () ⇒ { return 리턴값} ⇒ render = {() ⇒ { return 리턴값}}
2) 중괄호와 리턴 대신 () 하나만 쓰기 : () ⇒ (리턴값) ⇒ render = {() ⇒ (리턴값)}
3) 단일일 경우 render = { () ⇒ 리턴값 } 바닐라 자스 문법 !
📍 수정한 코드
<Route
render={()=>
{return <Homepage
isLogin = {isLogin}
handleLogin = {handleLogin}
/>)}
}
/>2.데이터 dummy 경로
data.json 파일로 블로그 게시글 및 유저 정보를 뿌려주려는데, 분명 이미지 경로가 잘 적혔다고 생각했음에도 이미지 파일들이 제대로 나오지 않았다. 어떤 문제였는지 찾아보니, public의 data.json 파일은 같은 public에 있는 index.html 파일 기준이라는 것을 알게 되었다. 그래서 경로를 다시 수정하고 보니 이미지가 잘 나왔다.
두번째로는 data.js와 data.json 파일이 차이점이다.
처음에 React 연습을 하거나 인강을 듣다 보면 종종 더미 파일을 import해오는 경우를 봤다. 그래서 나도 모르게 일단 fetch로 불러오기 전에 import로 연습부터 해보자! 라는 생각으로 json파일에 const export 변수명 = [더미들] 이렇게 쓰니 파일 전체가 빨갛게 오류가 났다.
이유는 바로 Json 파일은 import해올 수 없다는 사실이었다. 일반 js 확장자는 가능하지만 json은 불가하다는 것을 알게 됐다.
- Json 학습 글: https://velog.io/@greenth322/JSON
