우리가 익히 알고있던 arrow 함수에는 사실 많은 사용법이 존재한다🤔
(lint만 계속 쓰다보면 모르고 지나갔을 사실)
우리가 익히 아는 사용법은 JSX문법안에 return문을 사용하는 방법이다. (아니여도 괜찮아요 사실 방법이 아주 많거든요)
아래사진처럼 arrow 함수를 사용한 뒤 중괄호를 열고 fragment를 사용하여 jsx문법을 사용해주는 것이다.
위사진에서 어? 이상한데요? 라고 생각했다면 이포스트를 가볍게 skip해도 된다.
강의를 진행하다보니 많은 분들이 codesandbox를 통해 강사님과 동일하게 코딩을 하는데 왜 저는 화면이 렌더링 안될까요?!?!? 라는 질문을 많이 받았다... 처음에는 내가 뭘 잘못했나.. 자책을 했는데,, (의외로 간단한 문제였다..)
간단하게 말하면 오타!!!
맞다.. 오타였다. 직접 메일을 통해 샘플코드를 전송받아 확인해보면 대부분이 소괄호, 중괄호 등 오타에서 비롯된 렌더링 오류였고, 이 오류가 왜 빈번하게 발생하는지 고민을 했을때 리액트 기본문법을 제대로 숙지하지 않은채 화면상으로 따라하다보니 자연스럽게 오탈자가 나도 인지하지 못하는 문제였다. 사실 이부분은 엄청나게 중요하다!! 린트를 쓰는분이라면 에잇 이거 왜이랭! 하고 넘어갔을 수도 있다!
그래서 오늘은!!
이 소괄호, 중괄호, return 등을 리액트 arrow 함수에서 사용하는 방법에 대해서 알아볼 것이다. (서론이 길었나!?)
arrow 함수의 기본 구문은 () => {}이다. 그리고 이 중괄호 안에 return을 넣을 수 있다. 그리고 이때 중괄호를 빼면 () => ..이런 형식인데 이는 ()=> {return ...}과 같은 의미라고 볼 수있다.
즉 우리가 React에서 arrow함수를 사용할때는, 아래와 같은 방법으로 사용할 수 있다.
1) 중괄호 X ,소괄호 X, return X
const Buttons = () =>
<>
<button>안녕!</button>
</>
; 이렇게 별도의 리턴문 등 을 생락하고 엘리먼트를 렌더링 하는방법이 있다.
2) 중괄호 O, 소괄호 O, return O 모두 적용
const Buttons = () => {
return (
<>
<button>안녕!</button>
</>;
)
};기본형태가 아닐까 싶다!
2) 중괄호 O, 소괄호 X, return O
const Buttons = () => {
return <>
<button>안녕!</button>
</>;
};이건 린트를 사용한다면 자동으로 없어지는 거라,, 잘몰랐을 수도 있다! 하지만 생략되는거라는 사실!
정리하자면 arrow 함수를 사용할때 중괄호를 사용한다면 중괄호 안에 꼭 return문을 사용해줘야되고,
return 문 뒤에 소괄호를 넣었다면 최상위 엘리먼트를 기재해야되며, 소괄호를 넣지 않았다면 return과 같은 행에 최상위 엘리먼트를 기재해주면 된다!
언젠가 한번쯤.. 맞게 react 코딩하고 있는데 왜 렌더링이 안되는거야... 라는 미로같은 미궁에 빠질때 이 포스팅을 즐겨찾기 해놓고 다시 보러 오는 날이 있기를...😂
아니야!! 외우세여!!!!! 오지마악!
