[React] 컴포넌트와 props (feat. 배열 함수)

 이번엔 react의 꽃인 컴포넌트를 만들어보겠습니다.

 차례

 1. Components

 1-1. 외부 파일에서 컴포넌트 만들기

 1-2. props

 2. 배열

 2-1. forEach

 2-2. map

 2-2-1. forEach vs map

 2-3. filter

 2-4. sort

 

 1. Components

 컴포넌트는 react의 핵심 기능 중 하나로, 자주 쓸만한, 또는 반복되는 요소들을 따로 함수처럼 선언해서 쓸 수 있게 만든 겁니다. 쉽게 말하면 레고 블럭으로 무언가 만드는 겁니다.

 쓰는 방법 자체는 쉽습니다. 함수처럼 선언하고, html 태그 처럼 씁니다. 마찬가지로 html 태그처럼 두 가지 방식으로 쓸 수 있습니다.

 컴포넌트는 함수의 return안의 내용을 그대로 태그 안에 넣어줍니다. App()안에 썼던 것과 마찬가지로 javascript도 쓸 수 있습니다. 즉, App()도 컴포넌트라고 볼 수 있겠습니다. (index.js 들어가보면 App도 컴포넌트 처럼 쓰인 걸 볼 수 있습니다.)

 

 주의할 점은, 컴포넌트로 만든 함수는 대문자로 시작해야 합니다.

 

 1-1. 외부 파일에서 컴포넌트 만들기

 App 파일 안에 계속 쓸 수 있지만, 어느 정도 쓰다보면 내용이 너무 많아져 후에 내용을 편집해야 할 때 많이 불편합니다. 따라서 내용이 비슷하거나 서로 연관이 많이 된 것들은 따로 빼서 '모듈화'를 하게 됩니다.

 

 react에서 컴포넌트를 따로 만들기 위해 다른 파일로 만들려면, js 파일이 아닌 jsx파일로 만들어야 합니다.

디렉토리 이름은 자유롭게 쓰면 됩니다. / dodo.jsx

 첫 줄에 React를 추가하고, App.js 에서 썼던 것처럼 마지막에 export default {컴포넌트}로 꺼낼 수 있게 해줍니다.

 App.js에 컴포넌트를 쓰기 위해선 jsx파일을 불러와야 합니다. 불러오면서 컴포넌트 이름을 명시해주면 됩니다. 이때 디렉토리에는 .jsx 확장자를 안 써줘도 됩니다.

 

 만약 jsx에 컴포넌트를 여러개 만들고, 여러개를 꺼내쓰게 만들고 싶다면 다음과 같이 수정하면 됩니다.

export에 default를 뺍니다. {} 필수.

 이럴 때 주의할 점은 export에 {}을 썼다면, App에서 쓸 때 하나만 불러오고 싶어도 {}를 써줘야 합니다.

 

 1-2. props

 컴포넌트 내에서 javascript를 통해 데이터를 다루고, 쉽게 html 안에 내용을 넣을 수 있습니다. 하지만 기본적으론 함수가 그렇듯, 컴포넌트 끼리 변수 등이 공유되지 않습니다.

 따라서 같은 구문을 컴포넌트 마다 반복시키지 않도록, 데이터를 공유할 수 있는 'props(Properties)'라는 기능을 제공합니다.

다른 컴포넌트도 Dodo1과 똑같이 생겼습니다.

이미지는 지웠습니다.

 컴포넌트 이름으로 만들어진 태그 안에 속성처럼 데이터 이름을 정합니다. (자유롭게 정해도 됩니다.) 그리고 데이터를 넣습니다. javascript 변수를 넣는 것이기 때문에 {} 안에 넣어줍니다.

 상대 컴포넌트에서 데이터를 꺼낼 때, 함수 기초값 자리에 props를 써줍니다. props의 내용으로 위에서 정한 데이터 이름을 불러옵니다. 마찬가지로 javascript 변수를 넣는 것이기 때문에 {} 안에 넣어줍니다.

 

 다른 jsx 파일에 있는 컴포넌트에도 같은 방식으로 보내고, 같은 방식으로 꺼내 쓸 수 있습니다.

 

 함수도 가져다 쓸 수 있습니다. 함수를 쓸 땐 함수 이름만 보내야 합니다.

 

 2. 배열

 컴포넌트는 똑같이 생긴걸 수차례 반복할 때 쓰기 좋아, (당연하게도) 반복시킬 수 있는 것과 함께 많이 쓰입니다. 그중 하나가 바로 배열이죠.

 반복문 for로 배열을 다룰 때에는 쓸게 은근 많아지는데, javascript에선 배열의 원소를 쭉 돌아주는 함수가 몇 개 있습니다.

 

 2-1. forEach

let arr = [1, 2, 3, 4]

arr.forEach((el) => console.log(el))

 

 쓰는 법은 간단합니다. 배열에 forEach를 붙이고, forEach 안에 처리할 함수를 써 줍니다. 이럴 때 한 줄로 함수를 구현하는 화살표 함수(Arrow Function)를 자주 씁니다.

 

 2-2. map

let arr = [1, 2, 3, 4]

new_arr = arr.map((el) => el + 1)

 

 map은 forEach와 같은 방식으로 쓰이지만, 큰 차이가 있습니다. 바로 배열의 원소를 쭉 돌면서 함수를 적용한 후, 배열로 결과를 return 해줍니다.

 

 2-2-1. forEach vs map

 map에서 언급된 차이로 인해, forEach와 map은 쓰이는 방법이 조금 다릅니다.

 특히 react에서, forEach는 배열을 돌며 조건부 작업을 할 때 종종 쓰게되고, map은 컴포넌트를 뽑아쓸 때 자주 쓰게 됩니다.

 특히 return 안에서 {}안에 javascript를 쓸 때, return 값이 있어야 html 태그 안에 내용물로 출력이 가능한데, forEach는 return이 없기 때문에 결과물이 나타나지 않습니다.

같은 컴포넌트를 두 줄 썼는데, 한 줄만 나왔다.

 2-3. filter

 filter는 단어 뜻 그대로 특정 원소를 걸러주는 역할을 합니다. 즉, map과 if를 합쳐놓은 것과 유사하며, 함수를 넣는 부분에 조건을 보는 함수를 넣어줘야 합니다.

 

let arr = [1, 2, 3, 4]

new_arr = arr.filter((el) => el > 2)
//3, 4

 2 초과만 남긴 배열 new_arr이 만들어 졌습니다.

 

 역시 filter는 조건문과 같기 때문에 map과 함께 컴포넌트를 뽑아 쓸 때도 쓰이고, 배열을 처리할 때도 쓰입니다.

 

 2-4. sort

 배열의 순서를 재조정해주는 함수입니다. 역시나 안에 조건식으로 함수를 넣어줄 수도 있지만, 빈자리로 남겨둘 수 있습니다.

 다만, 빈자리로 남기면 문자열 기준으로 정렬하기 때문에 숫자 정렬이 1, 10, 11, 2, 20, 3... 순으로 되기 때문에 조건식을 넣어주는게 좋습니다.

 

let arr = [2, 4, 5, 1, 3]

arr.sort((a, b) => a - b)
arr.sort((a, b) => {if(a > b) return -1})

 

 만약 객체(또는 JSON)을 사용한다면 다음과 같이 쓸 수 있습니다.

 

let obj = [
{"id":1, "date":"1997.07.21", "content":"dodo1"},
{"id":2, "date":"1988.11.10", "content":"dodo2"}
]

obj.sort((a, b) => a.date - b.date)

 (문자열도 숫자로 치환되서 처리하는 모양인지 계산식을 넣어도 됩니다.)

 

 

 역시나 이것저것 쓰다가 길어졌는데, 아무튼 감사합니당.