오늘도 강의를 들으려고 하자마자 전문용어가 나와서 덜컥 겁이 났다.container? 뭘 담는다는거지? props는 또 뭐야? 막 복잡하고 고난이도의 로직이 필요한 건가? 라고 생각했지만 멘토님이 잘 가르쳐 주시고 실습때 따라해 보니 의외로 간단한 내용이었다.
코딩에서 간단한 것은 매우 중요한 것이다. 똑같은 기능을 구현해도 지저분하게 몇 천줄씩 코드를 작성하는 사람이 있고 간단하게 한가지 파일에 70줄 정도의 코드만 남기는 사람이 있는데 당연히 후자가 고수라고 볼 수 있다. 모든 기술은 고수의 영역으로 갈수록 '노가다' 보다는 '단순함'을 추구하게 된다. 망치질을 할때 처음에는 팔힘으로만 하지만 나중에는 스냅과 몸 전체의 힘을 쓰면서 약간의 힘으로도 못이 잘 박히는것과 같다고 할것이다.
(영화 매트릭스에서 나온것 같은 이런 지저분한 화면은 사실 고수의 코드가 아닌 하수의 코드인 것이었다..... 프로그래머에 대한 환타지가 ㅎㅎㅎ)
그러므로 그리 어렵지 않은 개념인 것처럼 오늘 배운 개념들은 우리가 앞으로 코드를 짤 때 훨씬 더 간결하게 코드를 짤 수 있도록 도와준다. 그렇다면 어떻게 제목에 나오는 개념들이 우리의 코드를 훨씬 더 간결하게 해준다는 것일까?
이제 설명 들어간다. (지금 당장 달려 보자구!!!)
우리가 일반적으로 자바스크립트와 html을 통한 UI를 Next.js를 통해 짜게 된다면 아래와 같이 코드가 작성되는게 일반적이다.
(코드박스에 넣으면 자꾸 잘려나가기에 그냥 여기에 적도록 한다.)
Return 위로는 Javascript 기능 영역이 들어가게 되고 return 아래로는 사용자들에게 보여지는 UI영역인 JSX영역이 들어가게 된다. 그 외에도 GQL이라던지 react가 들어갈 수 있는데 문제는 이렇게 하면 지금은 코드가 적어서 문제가 없지만 작성되는 코드가 많아지면 많아질수록 코드가 지저분해져 복잡해지고 협업할때 다른 사람이 보고 수정할 수 없는 유지보수가 까다로운 코드가 되어 버리는 것이다.
그렇기 때문에 아래와 같이 사용자들에게 보여지는 JSX 부분은 presenter에 파일에 담고, 자바스크립트 기능 부분은 container에 서로 따로 담아주게 되면 훨씬 코드가 간단해지는 것이다.
왼쪽이 자바스크립트 기능(앞으로는 기능이라고 하겠다.) 오른쪽이 UI부분을 따로 담은 코드이다. 그 후에 기능 부분의 Return 아랫 부분에 UI가 들어간 함수를 import해오게 되면 presenter는 container에 조립되게 되고 container는 app.js에서 조립되어 최종적으로는 부모인 app.js를 통해 화면에 구현되게 되는 것이다.
비슷한 방식으로 스타일, API함수 등도 나눠서 작성하고 관리할수가 있다. 그렇다면 UI 부분에 사용되어야 하는 함수가 있고 이 함수는 기능 부분에 존재할텐데 그렇다면 서로 다른 파일인데 어떻게 연동시켜 구현해야 하나? 라는 의문이 따라올 수 있을 것이다. 이럴땐 함수를 데이터로 만들어서 props를 통해 자식파일인 presenter에 보내주면 된다.
먼저 위의 예시의 경우 <BoardWriteUI>라는 태그를 사용하여 html구조를 import 하였으므로 이 태그 안에 props명을 지어주면 다음과 같이 지을 수 있다.
`<BoardWriteUI
onClickSubmit={onClicksubmit}`
이렇게 props명을 넣어주고 그 안에 데이터나 변수를 할당해 주게 되면(변수는 중괄호를 통해서 할당한다.) 자식 파일의 함수 안에 props를 씀으로써 자식이 부모의 데이터를 가져올 수 있게 되어 자식이 위와 같은 방식으로 부모파일의 함수를 가져다가 쓸 수 있게 되는 것이다.
export란?
여기서 export의 개념도 잠깐 배웠는데 export는 내보내기이다. export default는 기본값으로 이 데이터만 내보낸다는 뜻이 되므로 기본적으로 default 데이터만 내보내게 된다. 이때는 import시에 중괄호가 붙지 않는다. 한가지만 불러오기에 이름도 중요치 않다. 그러나 default가 아닐 때에는 다양한 데이터를 import하기 때문에 서로 다른 이름을 쓰는게 중요해지고 중괄호가 붙게 된다.
오늘의 TIL을 마치도록 한다.
