리액트 강좌

4-1.Props

Props

컴포넌트가 부품이 되려면 할용성을 높여야 한다. 고정된 정보만 보여주고 정해진대로만 동작하는 것이 아니라 사용하는 측에서 원하는대로 바꿀 수 있어야 한다. 이런 장치를 속성이라고 부르며 HTML 태그도 속성을 가진다.

똑같은 a 태그라도 href 속성이 가리키는 주소에 따라 클릭할 때 이동할 곳이 달라진다. img 태그도 src 속성에 따라 보여줄 이미지를 결정하고 이미지의 크기를 강제로 지정하는 속성도 있다. 속성이 많을수록 태그의 활용성이 높아진다.

컴포넌트도 마찬가지로 호출측에서 원하는 값을 전달할 수 있어야 한다. 성적표 컴포넌트인 App은 출력이 정해져 있어 항상 같은 모양이다. score 변수를 출력하지만 함수 선두에 선언된 상수일 뿐이다. 성적을 보여 주는 컴포넌트라면 최소한 누구의 성적이고 점수는 몇 점인지 전달받아야 한다.

호출측에서 컴포넌트로 전달하는 인수를 props라고 하는데 인수는 딱 하나밖에 없지만 여러 속성을 한꺼번에 포함하는 객체이다. 호출측이 전달한 개별 인수를 props의 멤버로 참조한다.

예제 : namescore

function ScoreBoard(props) {

return (

<p>{props.name}님의 점수는 {props.score}입니다.</p>

</>

)

}

function App() {

return (

</>

);

}

첫 예제는 여러 가지 문법을 설명하기 위한 요소가 있었는데 이제 기본을 이해했으니 가급적 간략하게 작성하자. 명칭 규칙을 설명하기 위해 작성한 className, id 속성은 빼고 <div> 대신 <> 빈 태그를 쓴다. 점수는 속성으로 받으므로 score 변수도 필요 없다.

컴포넌트는 고유의 이름을 가지는데 성적표 컴포넌트에는 ScoreBoard라는 멋진 이름을 붙였다. App은 페이지의 루트라 웬만하면 이름을 유지하는 것이 좋다. 컴포넌트 이름은 반드시 대문자로 시작해야 한다는 규칙이 있다. 컴포넌트 이름을 scoreBoard로 바꾼 후 실행하면 다음 경고가 발생하며 화면에 아무 것도 나타나지 않는다.

Warning: <scoreBoard /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

대소문자 구성이 틀렸으며 컴포넌트에 대해서는 파스칼케이스를 사용하라고 되어 있다. 이름에 대해 이런 까다로운 규칙을 강요하는 이유는 HTML 태그와 구분하기 위해서이다. 다음 샘플 문서를 보자.

리액트 컴포넌트도 HTML 태그와 같은 형식으로 사용하는데 섞여 있을 때 대소문자만 봐도 자격을 바로 판단할 수 있다. 컴포넌트의 종류를 쉽게 구분할 수 있으면 가독성이 향상되므로 이런 규칙을 강제한다. 시작만 대문자이면 되고 두번째 이후부터는 자유롭게 쓸 수 있어 SCOREBOARD라고 해도 되지만 눈에 잘 들어오지 않으므로 대소문자를 적절히 섞어 쓰는 것이 좋다.

이름 붙이는거까지 간섭하는가 싶겠지만 실제로 <button>과 <Button>이 다르고 <form>과 <Form>이 다른 예가 있다. 이 규칙이 없으면 이름을 MyButton, MyForm 따위로 지어야 하므로 더 불편해진다.

함수 컴포넌트의 인수는 딱 하나밖에 없지만 이름과 값의 쌍으로 된 객체여서 사실상 개수 제한이 없다. 인수의 이름은 아무래도 상관 없어 a나 b로 써도 되지만 속성의 집합이라는 의미에 맞게 관습적으로 props로 짓는다. props 인수안에 컴포넌트의 속성이 들어 있으며 호출측에서는 HTML 태그의 속성을 지정하듯 속성값을 전달한다.

<ScoreBoard name = "홍길동", score = "89"/> // 에러

컴포넌트 이름 다음에 속성="값" 형식으로 전달하되 속성이 여러 개일 때는 공백으로 구분한다. 컴포넌트는 함수의 형태를 띄고 있지만 호출측에서는 태그 형태를 취한다. 함수로 전달하는 인수가 아니고 태그의 속성이므로 콤마나 세미콜론이 아님을 유의하자. HTML 태그에 속성을 주듯 전달하면 된다.

속성이 props 객체로 묶여 전달되므로 JSX 내에서 속성을 참조할 때는 props의 멤버를 읽는 {props.인수명} 형식으로 적는다. <p> 문단 안에서 {props.name}, {props.score}을 읽어 문자열안에 삽입하여 출력했다.

리액트는 컴포넌트 호출문의 속성을 객체로 묶어 전달한다. 호출측은 이 객체를 props 인수로 받은 후 필요한 곳에서 멤버를 읽어 사용한다.

형식상 컴포넌트로 전달되는 인수는 props 객체 딱 하나지만 객체에는 수많은 멤버가 포함된다. 이제 ScoreBoard 컴포넌트는 전달받는 인수에 따라 출력 모양이 달라진다.

ScoreBoard 컴포넌트의 활용성이 높아졌다. 스타일나 동작에 대한 옵션까지도 속성으로 전달하면 더 다양한 형태로 활용할 수 있다.

정수 인수

태그의 속성은 항상 문자열이며 따옴표로 감싸 전달한다. HTML 문서에서는 값의 타입이 정수라도 <td colspan="2" rowspan="2"> 식으로 따옴표를 쓰는게 원칙이다. 숫자로 써도 봐 주지만 XHTML 규정상은 따옴표가 꼭 필요하다.

점수는 정수형이지만 score = 89로 적으면 에러이며 문자열로 전달해야 한다. 단순히 출력만 한다면 "89"로 전달해도 별 문제 없다. 그러나 이 값을 연산에 사용한다면 얘기가 달라진다. 예를 들어 모든 성적에 보너스 점수 2점을 더 주기로 했다고 해 보자. score에 2만 더하면 된다.

<p>{props.name}님의 점수는 {props.score + 2}입니다.</p>

이러면 89점에 대해 2점을 더해 91점이 나올 거 같지만 score가 문자열이므로 연결되어 892점이 되어 버린다. 이 문제를 해결하려면 다음 둘 중 하나의 방법을 써야 한다.

1.문자열로 받은 점수를 정수로 바꾼 후 연산한다. {Number(props.score) + 2}로 쓰면 91점이 된다.

2.호출부에서 전달할 때부터 정수로 전달한다. 이때는 인수를 { } 괄호로 감싸 score = {89}로 표기한다.

function ScoreBoard(props) {

return (

<p>{props.name}님의 점수는 {props.score + 2}입니다.</p>

</>

)

}

function App() {

return (

</>

);

}

"홍길동"이나 89는 자바스크립트의 리터럴이며 JSX 구문 안에서 스크립트를 쓰려면 { }괄호로 감싸는게 원칙이다. 문자열 속성도 {"홍길동"}으로 쓰는게 맞지만 번거로우므로 특별히 예외를 인정하여 따옴표만 감싸도 된다.

객체 인수

컴포넌트의 속성은 HTML의 속성과 사용 방법이나 형태가 비슷하다. 그러나 HTML의 속성이 단순한 값인데 비해 컴포넌트의 속성은 객체, 배열도 가능하며 심지어 함수까지 전달할 수도 있다. { } 괄호안에는 자바스크립트의 모든 표현식이 다 올 수 있다. 다음 코드는 name을 성과 이름 객체로, 점수는 3과목에 대한 배열로 전달한다.

예제 : propsobj

function ScoreBoard(props) {

return (

<p>{props.name.sung}{props.name.irum}님의 점수는

{props.score[0]}, {props.score[1]}, {props.score[2]}입니다.</p>

</>

)

}

function App() {

return (

</>

);

}

성과 이름을 붙여서 name 객체를 만들고 점수는 콤마로 구분하여 나열했다. 자바스크립트에서 객체는 { } 괄호로, 배열은 [ ] 괄호로 표현한다. JSX는 자바스크립트 코드를 { } 괄호로 묶으므로 괄호끼리의 중첩 관계가 복잡하다. 어떤 괄호가 무슨 역할을 하는지 잘 구분해야 한다.

props의 멤버인 name 객체의 정보를 읽으려면 props.name.sung 식으로 . 연산자를 연거푸 사용한다. 배열은 [첨자] 식으로 요소를 읽되 예제에서는 요소가 세 개 밖에 없어 직접 읽었다. 요소가 아주 많으면 map 등의 반복 함수로 루프를 돌리며 읽는다.

인수 분해 대입

props 인수는 객체여서 얼마든지 많은 속성을 포함할 수 있다. 그런데 인수를 읽을 때마다 매번 props. 을 앞에 붙이는 것은 귀찮은 일이다. 이럴 때는 분해 대입 문법을 사용하여 인수를 개별 변수에 대입받아 쓰면 편리하다.

예제 : splitprops

function ScoreBoard({name, score}) {

return (

<p>{name}님의 점수는 {score}입니다.</p>

</>

)

}

function App() {

return (

</>

);

}

인수 목록의 { } 괄호안에 객체의 멤버를 대입받을 변수명을 나열하고 본문에서는 이름만으로 인수를 참조한다. 분해 대입 문법은 자바스크립트 ES6부터 도입된 것이다. 좀 어려워 보인다면 namescore 예제의 함수 도입부를 약간 바꿔 보자.

function ScoreBoard(props) {

let name = props.name

let score = props.score

return (

<p>{name}님의 점수는 {score}입니다.</p>

....

props 객체로 인수를 받은 후 함수 선두에서 객체의 멤버를 같은 이름의 name, score 개별 변수에 대입받았다. 그러니 사용할 때는 {name}, {score}로 바로 읽을 수 있다. 이 절차를 간소화한 것이 분해 대입 문법이며 두 변수에 대한 대입을 하나로 합칠 수 있다.

function ScoreBoard(props) {

let {name, score} = props

인수 전달은 대입인데 객체를 전달받아 분해하는 것과 인수 목록에 아예 개별 변수를 써 전달받으면서 분해하는 것과 같다. 그 결과가 바로 예제의 코드이다.

function ScoreBoard({name, score}) {

컴포넌트의 속성은 개수에 상관없이 여러 개 쓸 수 있고 JSX는 모든 속성을 props 객체에 묶어 전달한다. 컴포넌트는 묶어 놓은 속성값을 props.속성 식으로 읽을 수도 있지만 개별 변수로 해체해서 읽을 수도 있다.

어차피 객체를 받아 멤버를 읽으나 각 멤버를 변수로 받아 읽으나 결과는 같다. 그러나 약간의 사소한 차이가 있는데 props 객체로 받으면 속성이 읽기 전용이지만 별도의 변수로 분해해서 받으면 읽기 전용이 아니어서 값을 바꿀 수 있다.

function ScoreBoard(props) {

props.name = "정우성"

function ScoreBoard({name, score}) {

name = "정우성"

에러

가능

props로 받은 인수는 상수여서 읽기만 하는 것이 원칙적이다. 분해해서 변수로 받으면 변경할 수는 있지만 인수는 원래 입력용이므로 전달받은 정보를 임의로 바꾸는 것은 바람직하지 않다. 그래서 인수를 대입받는 변수는 const로 선언할 것을 권장한다.

디폴트 속성

분해 대입 기법을 쓰면 디폴트 인수도 쓸 수 있다. props에 대응되는 멤버가 없으면 디폴트 인수를 적용한다. 예를 들어 score 인수를 전달하지 않으면 50점을 기본 점수로 준다고 해 보자.

function ScoreBoard({name, score = 50}) {

return (

<p>{name}님의 점수는 {score}입니다.</p>

</>

)

}

function App() {

return (

</>

);

}

score에 디폴트값 50을 지정하고 호출할 때 score 속성을 생략하면 기본값 50이 적용된다. 물론 명시적인 점수를 전달하면 그 값을 사용한다. 기본 속성은 undefined 일 때만 적용되며 null이나 0은 기본값이 적용되지 않음을 주의하자. 다음과 같이 전달하면 그냥 빈값으로 나타난다.

null은 값이 없음을 명시적으로 지정한 것이지 값을 정의하지 않은 것과는 다르다. 디폴트 속성은 아예 지정이 없을 때만 적용된다. 인수를 분해하지 않고 props 객체를 받을 때는 컴포넌트의 defaultProps 속성에 디폴트값의 목록을 객체로 정의하는 방법도 있다.

function ScoreBoard(props) {

return (

<p>{props.name}님의 점수는 {props.score}입니다.</p>

</>

)

}

ScoreBoard.defaultProps = {

score : 50

}

function App() {

return (

</>

);

}

props를 전달할 때 인수가 전달되지 않으면 defaultProps 객체에서 인수 이름과 같은 멤버를 찾아 기본값을 적용한다. 예전에는 이 기법이 통했는데 훅을 도입한 이후부터는 권장하지 않는다. 함수형 컴포넌트에는 동작하지 않으며 클래스형 컴포넌트에는 아직도 이 방법을 사용할 수 있다.

리액트의 변화라기보다는 ES6에 기본값 문법이 도입된 후부터는 쓸 필요가 없어졌다고 보는 것이 타당하다. 앞으로 이런 코드를 쓸 필요는 없지만 과거에 이 문법을 사용한 소스가 있어 존재만 알아 두면 된다.

타입 검사

자바스크립트는 원래 타입에 대한 정의가 없는 언어이다. 그러다 보니 앞서 예를 보인 정수 전달 예에서 문자열을 잘못 전달해도 이상없이 실행되어 버린다.

<p>{props.name}님의 점수는 {props.score + 2}입니다.</p>

점수에 2를 더하는 연산을 하는 컴포넌트에게 "89"를 전달한 것은 분명 실수이다. 그러나 props로 전달되는 속성이 무슨 타입인지 정의되어 있지 않아 컴파일러는 개발자의 의도를 정확히 알 수 없다. 이런 한계를 극복하기 위해 최근에는 자바스크립트에 타입 점검 기능을 추가한 타입스크립트를 많이 사용한다.

vite로 만든 study 프로젝트도 타입스크립트를 쓰고 있으므로 타입 점검 기능을 적극적으로 사용해 보자. props 다음에 멤버의 종류와 타입을 분명히 지정하면 맞지 않는 인수에 대해 경고를 표시한다.

function ScoreBoard(props: {

name: string;

score: number;

}) {

return (

<p>{props.name}님의 점수는 {props.score + 2}입니다.</p>

</>

)

}

function App() {

return (

</>

);

}

props 속성 다음에 문자열인 name과 숫자인 score를 멤버로 가지는 객체임을 분명히 지정했다. 이 객체 타입을 이후에도 계속 사용한다면 아예 interface로 타입을 정의한 후 지정하는 것이 좋다.

interface ScoreBoardProps {

name: string;

score: number;

}

function ScoreBoard(props: ScoreBoardProps) {

....

score를 문자열로 전달하면 밑줄이 그어지고 커서를 가져가면 경고를 보여준다.

이 경고를 보고 개발자는 자신의 실수를 알 수 있으며 바로잡을 수 있다. 이름에 숫자를 전달하거나 필수 정보를 전달하지 않을 때도 경고이다.

이름과 점수가 다 필요하지만 둘 중 하나가 생략되었으니 성적을 제대로 출력할 수 없다. 그러나 경고일 뿐이어서 이 상태로 실행은 가능하다. 비록 잘못된 결과이지만 웹은 유연해서 에러가 있더라도 웬만하면 일단 보여 주려는 경향이 있다.

타입스크립트가 독립적인 언어가 아니다 보니 자바스크립트의 한계를 뛰어 넘기 어렵다는 문제도 있다. vite는 타입스크립트를 쓰더라도 과거에 되던 코드는 여전히 유효해야 하므로 경고만 할 뿐 실행을 막도록 설정해 놓지는 않는다.

게다가 지금은 프로덕션 모드가 아닌 개발 모드이므로 사소한 실수까지 컴파일을 방해할 필요는 없다. 프로젝트를 잠시 중단하고 빌드해 보면 경고가 아닌 에러를 보여 주며 이 상태로는 배포하지 말라는 것을 분명히 알려 준다.

error TS2322: Type 'string' is not assignable to type 'number'.

이 상태로는 배포할 수 없으므로 에러를 해결한 후 다시 빌드해야 한다. 개발중에 타입 불일치 경고는 치명적인 버그의 원인이 되므로 무시하지 말고 잘 살펴 보자.

4-2.컴포넌트

컴포넌트 반복

컴포넌트는 여러 번 사용할 수 있다. HTML 문서안에 <a> 태그나 <img> 태그를 필요한만큼 쓸 수 있듯이 <ScoreBoard> 컴포넌트도 필요한만큼 쓸 수 있다. 부모 컴포넌트안에 나열하면 된다.

function ScoreBoard(props) {

return (

<p>{props.name}님의 점수는 {props.score}입니다.</p>

</>

)

}

function App() {

return (

</>

);

}

ScoreBoard 컴포넌트를 세 번 나열했으니 세 명에 대한 성적표가 출력된다. 똑같은 컴포넌트지만 속성에 따라 실제 내용은 달라진다. 너무 너무 상식적인 얘기이다.

한번 잘 만들어 놓으면 다른 프로젝트에 재사용하기도 쉽다. 아직 스타일을 주지 않아 밋밋해 보이지만 각 성적표에 박스를 두르고 배경색만 입혀도 그럴듯해 보인다. 이런 박스를 포개고 겹쳐 멋진 웹 페이지를 만든다. 이래서 컴포넌트를 부품이라고 하며 리액트를 컴포넌트 기반이라고 하는 것이다.

잘 만들어 놓은 컴포넌트를 다른 프로젝트에 복사하기만 하면 바로 재사용할 수 있으며 웹에 전문가들이 만든 컴포넌트가 널려 있다. ScoreBoard 함수를 복사해 붙여 넣으면 된다. 단, 컴포넌트는 실용적인 속성을 많이 제공해야 하며 사용하는 쪽에서는 요구하는 속성을 정확히 전달해야 한다.

컴포넌트 중첩

커다란 컴포넌트 하나보다는 자잘한 컴포넌트 여러 개로 나누어 놓으면 다양한 방식으로 조합해서 사용할 수 있다. 마치 함수를 잘게 나누면 편의성이 증가하는 것과 같다. 성적표는 워낙 작아서 더 나눌 것도 없지만 좀 억지스럽더라도 시험이름과 성적항목으로 분리해 보자.

예제 : twocompo

function ScoreBoard(props) {

return (

<h2>{props.exam} 성적표</h2>

{<ScoreItem name = {props.name} score = {props.score}/>}

</>

)

}

function ScoreItem(props) {

return (

<p>{props.name}님의 점수는 {props.score}입니다.</p>

)

}

function App() {

return (

</>

);

}

전체 성적표에서 한 사람의 성적을 표시하는 문단을 ScoreItem컴포넌트로 분리했다. <p> 태그 하나를 리턴하는 컴포넌트여서 굳이 <div>나 <>로 감싸지 않아도 된다. 한줄로 쓸 수도 있지만 확장성을 고려하여 ( ) 괄호는 붙여 두었다.

성적은 ScoreItem 하위 컴포넌트로 분리하고 ScoreBoard는 시험 이름만 표시한다. 시험도 여러 종류가 있으므로 이름을 exam 속성으로 전달받아 표시한다. 속성이 하나 더 늘었으므로 호출할 때는 exam 속성도 지정해야 한다.

ScoreBoard는 세 개의 속성을 받아 exam은 자신이 출력하고 name, score는 자식 컴포넌트인 ScoreItem으로 전달한다. 두 개의 컴포넌트가 중첩되어 있으며 ScoreBoard 컴포넌트가 ScoreItem을 포함하여 리턴한다.

겹치니까 복잡해 보이지만 사실은 굉장히 상식적인 구조이다. HTML 문서에서 <p>태그 안에 <b>, <a> 태그가 포함되어 있는 것과 개념적으로 똑같은 구조이다. <p>, <a> 처럼 소문자로 시작하는 건 HTML 태그이고 <ScoreBoard>, <ScoreItem> 처럼 대문자로 시작하는 건 리액트 컴포넌트일 뿐이다.

<p>개발자의 <b>천국</b> :

</p>

컴포넌트를 잘게 나누어 놓으면 자기들끼리 중첩할 수 있고 같은 컴포넌트를 나열할 수도 있다. 과연 그런지 App에서 컴포넌트를 나열하여 성적표와 성적 항목을 여러 개 만들어 보자. 여러 개의 컴포넌트를 나열할 때는 단일 루트 원칙에 따라 <> </>로 감싸야 한다.

function ScoreBoard(props) {

return (

<h2>{props.exam} 성적표</h2>

{<ScoreItem name = {props.name} score = {props.score}/>}

</>

)

}

function ScoreItem(props) {

return (

<p>{props.name}님의 점수는 {props.score}입니다.</p>

)

}

function App() {

return (

</>

);

}

똑같은 컴포넌트라도 속성을 받아 들이므로 각각 시험과 이름, 점수를 다르게 표현할 수 있다. 또 ScoreItem은 ScoreBoard에 포함되어 있지만 그 자체도 독립적인 컴포넌트이므로 단독으로 사용할 수도 있다.

지금은 단순한 방법으로 컴포넌트를 반복했지만 배열, 루프와 결합하여 컴포넌트를 동적으로 생성하면 대량의 자료를 출력하고 필터링, 정렬 등의 기법을 다 활용할 수 있다. 이 실습은 잠시 후 해 볼 것이다.

컴포넌트 함수 중첩

ScoreItem과 ScoreBoard는 긴밀히 연관되어 있다. 점수는 성적표 안에 있어야 의미가 있으니 중첩해서 쓰는게 당연하다. 그러나 컴포넌트끼리 중첩관계라고 해서 함수를 중첩하는 것은 바람직하지 않다.

function ScoreBoard(props) {

function ScoreItem(props) {

return (

<p>{props.name}님의 점수는 {props.score}입니다.</p>

)

}

return (

<h2>{props.exam} 성적표</h2>

{<ScoreItem name = {props.name} score = {props.score}/>}

</>

)

}

function App() {

return (

</>

);

}

ScoreBoard 함수안에 ScoreItem 지역 함수를 선언했다. 어차피 성적표 안에 성적이 들어가야 하고 자바스크립트가 지역 함수를 지원하니 문법적으로는 아무 문제가 없으며 실행도 잘 된다. 그러나 여러 가지 이유로 이런 형태는 권장하지 않는다.

▶ 다른 곳에서 ScoreItem 만 재활용하고 싶을 때 부모와 엮인 코드를 분리한 후 가져 가야 하므로 번거로워진다.

▶ 부모를 랜더링할 때마다 자식 컴포넌트를 강제로 새로 생성하므로 메모리도 많이 쓰고 느려진다.

▶ 한쪽에 버그가 생길 때 테스트하기 어렵다.

컴포넌트끼리 기능적으로는 중첩 관계이더라도 함수는 반드시 최상위 레벨에 독립적으로 작성할 것을 권한다. ScoreBoard와 ScoreItem은 같은 레벨의 평등한 함수로 정의하고 조합할 때만 중첩해서 써야 한다. 더 이상적으로는 아예 모듈을 분리하는 것이 좋다.

정말 극단적으로 간단한 컴포넌트는 기동성을 위해 함수를 중첩하는 경우도 있다. 그러나 문법적으로 가능하더라도 권장하지 않는다. 다 이유가 있어서 만들어진 관행이므로 가급적 지키는 것이 좋다. 리액트를 잘 활용하려면 이런 관행을 제대로 익히는 것도 중요하다.

children

컴포넌트도 일종의 태그이다. 컴포넌트만 삽입할 때는 <ScoreBoard /> 식으로 쓰지만 <p></p>나 <div></div>처럼 여는 태그와 닫는 태그를 각각 쓸 수도 있다. 이러면 태그 사이에 뭔가를 더 넣을 수 있다. 요렇게 전달된 태그는 Props의 숨겨진 인수 children으로 참조한다.

function ScoreBoard(props) {

return (

<p>{props.name}님의 점수는 {props.score}입니다.</p>

<hr />

<p>공지 사항 : {props.children}</p>

</>

)

}

function App() {

return (

기말고사도 잘 준비해 주세요.

</ScoreBoard>

</>

);

}

<ScoreBoard> 태그의 내용으로 전달 사항을 명시하면 컴포넌트는 이 내용을 {props.children}으로 읽어 출력한다. 공지 사항을 성적표와 구분하기 위해 수평선을 긋고 아래쪽에 문단으로 출력했다.

<p> 태그 안쪽에 문단의 내용이 들어가는 것과 개념적으로 같다. 태그 안에 문자열 뿐만 아니라 자식 태그가 들어갈 수 있듯이 컴포넌트도 마찬가지이다. 컴포넌트 내부의 수평선과 공지사항 문단을 호출측에 넣고 컴포넌트는 이걸 그대로 출력해도 된다.

function ScoreBoard(props) {

return (

<p>{props.name}님의 점수는 {props.score}입니다.</p>

{props.children}

</>

)

}

function App() {

return (

<hr />

<p>기말고사도 잘 준비해 주세요.</p>

</ScoreBoard>

</ScoreBoard>

</>

);

}

children은 리액트 컴포넌트의 배열인데 {props.children}만 쓰면 배열이 그대로 출력된다. 이렇게 되면 호출측에서 전달사항을 컴포넌트마다 다르게 전달할 수 있어 활용성이 증가한다. 성적에 따라 다른 전달 사항을 넘길 수도 있고 다른 스타일을 적용할 수도 있어 호출측에 랜더링 방식까지 지시할 수 있다.

props로는 컴포넌트의 속성 뿐만 아니라 자식 컴포넌트까지도 다 전달된다. 호출측의 모든 정보가 이 안에 다 들어가는 셈이다. children은 차일드 전체를 가지는 배열이며 일부만 읽는 문법은 따로 제공하지 않는다. 일부만 사용하려면 배열을 검색해서 필터링한 후 사용하면 된다.

컴포넌트별 소스 분리

지금까지의 예제에서는 컴포넌트가 여러 개이더라도 보기 쉽도록 가급적 한 파일에 작성했다. 그러나 실무에서는 컴포넌트별로 각각의 소스 파일에 작성하는게 원칙이다. 이 원칙대로 App, ScoreBoard, ScoreItem 3개의 컴포넌트를 따로 만들어 보자. 통합 배포 예제에도 작성되어 있지만 이런 실습은 별도의 프로젝트를 따로 만들어 실습하는게 좋다.

App.tsx는 이미 있으니 나머지 두 개의 파일만 만들면 된다. 별도의 하위 폴더를 만들어도 되지만 귀찮으니 src 폴더에 만들자. 탐색기에서 src 폴더를 선택해 놓은 상태에서 오른쪽 툴바의 두 번째 새 파일을 버튼을 클릭하면 src 아래 새 파일 이름을 입력하는 에디트가 열린다.

가장 하위의 컴포넌트인 ScoreItem부터 만들어 보자. src에 ScoreItem.tsx 파일을 추가하면 빈 편집기가 열리는데 다음 소스를 작성한다.

function ScoreItem(props) {

return (

<p>{props.name}님의 점수는 {props.score}입니다.</p>

)

}

export default ScoreItem

컴포넌트의 코드는 이미 본 것이고 소스 제일 아래쪽에 컴포넌트를 외부로 공개하는 export문이 작성되어 있다. 자신을 밖으로 공개해야 사용하는쪽에서 이 컴포넌트를 불러다 쓸 수 있다. 같은 절차대로 이번에는 ScoreBoard.tsx를 추가한다.

import ScoreItem from './ScoreItem';

function ScoreBoard(props) {

return (

<h2>{props.exam} 성적표</h2>

{<ScoreItem name = {props.name} score = {props.score}/>}

</>

)

}

export default ScoreBoard;

소스 선두에서 import문으로 ScoreItem.tsx의 ScoreItem 컴포넌트를 읽어온다. 이 문장이 있어야 <ScoreItem> 컴포넌트를 사용할 수 있다. ScoreBoard 자신도 외부로 공개해야 하므로 소스 말미에 export 선언을 해야 한다. 컴포넌트가 준비되었으니 App.tsx에서 컴포넌트를 배치한다.

import ScoreBoard from './ScoreBoard';

import './App.css'

function App() {

return (

</>

);

}

export default App

성적표를 출력하기 위해 ScoreBoard를 임포트하고 <ScoreBoard>를 배치한다. 성적표 안의 ScoreItem은 직접 사용하지 않으니 굳이 굳이 임포트하지 않아도 된다. App 컴포넌트 자신도 main.tsx에서 사용하므로 export 하는데 배포 예제에는 이미 작성되어 있다.

컴포넌트간의 포함 관계가 여러 단계이다. 사실 main도 우두머리는 아니며 index.html의 root 아래로 들어간다. 실행해 보면 성적표가 화면 중앙에 나타나 한 소스 파일에 모두 작성한 것과 결과는 같다.

현대적인 프로그래밍은 가급적 잘게 분할 개발하는 모듈화가 원칙이다. 한 파일은 딱 하나의 임무만 띄고 그것만 잘 하면 된다. 이 원칙을 따르면 여러 가지 장점이 생긴다.

▶ 분할 작업이 용이해 각자 맡은 소스만 작성하면 된다. 서로 간섭할 일이 없고 git에서의 충돌도 최소화할 수 있다.

▶ 컴포넌트가 소스가 1:1 대응되므로 재사용하기 쉽다. 소스 파일만 복사해 붙여 넣으면 다른 프로젝트에서도 똑같이 동작한다.

▶ 바뀐 부분만 다시 컴파일하면 되므로 개발 속도가 빨라지고 배포할 때도 업데이트한 부분만 다시 로드하면 되니 빠르다.

실무 프로젝트에서는 장점이 많아 적극적으로 분할해야 한다. 그러나 실습할 때는 코드를 작성하는 것보다 파일을 만들고 import, export 하는데 손이 더 많이 가 번거롭다. 고작 다섯줄밖에 안되는 코드를 위해 별도의 파일을 만드는 것은 낭비이다.

또 학습하는 사람이 소스를 읽을 때도 여러 파일에 흩어진 코드를 따로 봐야 하니 가독성도 심하게 떨어진다. 이런 이유로 이 강좌는 한 주제에 대해서는 가급적 한 소스 파일에 작성하였다. 아래 위로 관련 컴포넌트가 인접해 있으면 구조 파악이 용이하다.

4-3.컴포넌트 관리

배열 출력

웹 페이지는 비슷한 정보가 계속 반복되는 형태가 많다. 쇼핑몰은 상품의 나열이고 게시판은 글의 나열이다.

이런 나열되는 부분을 컴포넌트로 정의하여 반복하면 된다. 앞에서 ScoreItem을 두 번 나열해 봤는데 대용량은 이런 기계적인 방법으로는 만들 수 없다. 무식하게 만든 코드는 관리도 안된다.

가변 개수의 컴포넌트를 다룰때는 배열과 루프를 사용한다. JSX 자체는 이런 기능을 제공하지 않으며 자바스크립트의 문법을 활용한다. 자바스크립트만 알면 굉장히 쉬운 내용이다. 다음 예제는 우리나라 도시에 대한 간단한 데이터베이스를 웹 페이지에 출력한다.

예제 : compmap

const cities = [

{ name: '서울', area: 605, popu: 974, metro: true, region: '경기' },

{ name: '여주', area: 608, popu: 11, metro: false, region: '경기' },

{ name: '부산', area: 765, popu: 342, metro: true, region: '경상' },

{ name: '청주', area: 940, popu: 83, metro: false, region: '충청' },

{ name: '전주', area: 205, popu: 65, metro: false, region: '전라' },

{ name: '홍천', area: 1819, popu: 7, metro: false, region: '강원' },

]

function CityList() {

return (

<ul>

{cities.map(city =>

<li>

{city.name} : {city.region}도 {city.area}Km2, {city.popu}만명

</li>

)}

</ul>

</>

)

}

function App() {

return (

</>

);

}

이 예제의 cities 배열은 도시 정보를 가진다. 도시 정보 하나가 객체이며 그런 객체 여러 개가 모여 배열을 이룬다. 실무 환경에서 이런 정보는 당연히 데이터베이스에서 읽어 오겠지만 지금은 그런게 없으니 객체 배열로 샘플을 간단히 만들었다.

CityList 컴포넌트는 도시 정보를 Array의 map 메서드로 반복하며 HTML 태그로 전환한다. 제목은 <h2>로 붙이고 도시끼리 순서가 있는 것은 아니므로 <ul> 목록으로 나열한다. 각 도시는 <li> 태그로 표시한다. 실행 결과부터 보자.

<h2>와 <ul>은 반복 대상이 아니므로 JSX 안에 그냥 적는다. 각 도시의 항목인 <li>는 도시수만큼 반복하는데 이 반복을 map 메서드로 처리했다. 이 코드가 굉장히 요상해 보이고 처음 보는 사람에게는 어려운데 시간이 좀 걸리더라도 상세히 분해해 보자.

map은 배열의 각 요소를 순회하며 요소값을 변형한 결과로 구성된 새로운 배열을 만들어 낸다. 서울, 부산, 청주 같은 도시 객체를 city라는 이름으로 받아 이 도시의 정보를 <li> 태그로 포장하여 출력한다. map은 출력값을 모아 새로운 배열을 리턴하며 웹페이지에 그 배열이 나열된다.

map은 요소를 직접 변형하지 않고 각 요소에 대해 사용자가 제공한 함수를 호출한 후 그 결과를 모아 새로운 배열을 만든다. 변형을 어떻게 할 것인가는 사용자 함수가 결정하는데 이 함수는 sub(value)의 형태를 가지고 변형한 값을 리턴한다. map은 sub 함수를 불러 일을 시킬 뿐이다. 이 동작을 분해하여 코드를 다시 작성해 보자.

function CityList() {

function sub(city) {

return (

<li>

{city.name} : {city.region}도 {city.area}Km2, {city.popu}만명

</li>

)

}

return (

<ul>

{cities.map(sub)}

</ul>

</>

)

}

결과는 물론 같다. sub는 각 도시를 하나씩 전달받아 <li> 태그로 감싸고 도시의 정보를 문자열로 조립한다. 객체로 정의되어 있는 도시 정보를 분해하여 웹 페이지에 출력할 수 있는 태그 집합으로 만든다.

sub가 한 도시의 정보를 잘 바꿔주고 있으니 map은 배열의 도시를 하나씩 꺼내 sub를 부르기만 하면 된다. 이 구문에서 sub를 화살표 함수로 바꿔 적은게 위 예제이다. 함수 호출문 안에 또 다른 함수 정의문이 있어 헷갈릴 뿐 완전히 같은 코드이다.

만약 이 코드도 어렵다면 map 함수의 동작을 평이한 코드로 더 분해해 보자. 도시를 반복 처리하는 동작이므로 결국은 for 반복문이다. 다음 코드의 arraymap 함수는 똑같은 동작을 하며 결과는 역시 같다.

function CityList() {

function arraymap() {

let ar = []

for (let c in cities) {

ar.push(

<li>

{cities[c].name} : {cities[c].region}도 {cities[c].area}Km2, {cities[c].popu}만명

</li>

)

}

return ar

}

return (

<ul>

{arraymap()}

</ul>

</>

)

}

빈 배열 ar를 선언하고 cities의 도시를 순회하며 각 도시 정보를 <li> 엘리먼트로 조립하여 배열에 추가한다. 루프를 다 돌면 도시 정보를 목록으로 나열한 태그 집합이 된다. 이걸 가상 DOM으로 리턴하여 랜더링하면 웹 페이지에 도시 목록이 나타난다.

위 코드는 평이해서 이해하기 어렵지 않다. 한 작업이 두 블록으로 나누어져 보기 싫은데 그렇다면 for 문 자체를 <ul> 안에 넣어 버리면 어떨까? JSX 안에는 표현식만 들어갈 수 있어 명령문을 넣는 것은 안된다. 정 하려면 익명 함수를 만들고 바로 호출하는 문법을 쓸 수는 있다.

function CityList() {

return (

<ul>

{

(() => {

let ar = []

for (let c in cities) {

ar.push(

<li>

{cities[c].name} : {cities[c].region}도 {cities[c].area}Km2, {cities[c].popu}만명

</li>

)

}

return ar

}

)()

}

</ul>

</>

)

}

괄호 중첩 관계가 복잡한다. (() => { })까지가 람다 함수이고 그 뒤의 ()는 그 함수를 호출하여 표현식을 리턴하는 문장이다. 제일 바깥의 { }는 JSX가 코드를 포함할 때 요구하는 괄호이다. 들여쓰기를 잘 해 놔서 자세히 보면 각 괄호의 의미를 파악할 수 있다.

compmap 예제가 압축적이다 보니 얼른 눈에 들어오지 않지만 자바스크립트 문법을 이해하고 있으면 그리 어려운 코드는 아니다. 첫 예제라 과도하게 분해해 봤는데 리액트에서 화살표 함수를 많이 쓰므로 일련의 코드 변화를 완벽하게 이해해야 한다. 리액트가 어려운게 아니고 자바스크립트가 어렵다.

PK 지정

컬렉션을 다룰 때는 각 항목끼리 구분 가능한 키가 필요하다. 키를 지정하지 않아도 출력에는 문제가 없지만 심각한 성능 저하가 발생한다. 예제를 실행하면 콘솔창에 다음 경고가 나타난다.

Warning: Each child in a list should have a unique "key" prop

목록의 자식, 이 경우는 각 도시에 유일한 키가 필요하다는 얘기다. 키가 지정되지 않으면 항목끼리 명확히 구분할 수 없고 이 상태에서는 검색이나 갱신에 불필요한 시간이 소요된다. 데이터베이스 테이블에 PK가 필요한 이유와 같다.

각 항목을 나열할 때 엘리먼트의 key 속성에 키로 사용할 값을 지정한다. 도시 목록에서 키로 사용할만한 항목은 당연히 이름이다. 전라도 광주, 경기도 광주처럼 중복되는 예가 있지만 적어도 이 테이블에는 없다. compmap예제에 다음과 같이 city.name을 키로 지정한다.

만약 키로 지정할만한 정보가 없다면 map의 콜백 함수로 배열의 첨자인 index를 받아 순서값이라도 키로 지정해야 한다.

{cities.map((city, index) =>

순서값은 편집이나 정렬에 의해 바뀔 위험이 있지만 단순히 순서대로 출력만 한다면 키로 사용할 수 있다. 정 고유키가 없다면 원본 데이터에 문제가 있는 것이므로 원본부터 정규화하는 것이 바람직하다.

키를 지정했다고 해서 딱히 달라지는 건 없고 실행 결과는 같다. 다만 콘솔창에 경고만 사라질 뿐이다. 이 예제에서는 별 차이가 없지만 삽입, 삭제가 잦을 때는 키가 있는 경우와 없는 경우의 성능차가 확연히 벌어진다.

key 속성은 리액트 라이브러리에게 전달되는 일종의 최적화 힌트이다. 이 정보가 있으면 특정 항목이 변경될 때 목록 전체를 갱신할 필요 없이 key로부터 갱신할 노드를 정확히 찾아 딱 그 부분만 갱신할 수 있어 속도가 빨라진다.

필터링

Array의 filter 메서드는 조건에 맞는 항목만 찾아 새로운 배열을 생성한다. 사용자 함수로 각 요소를 전달하며 이 함수가 true를 리턴하는 항목만으로 새로운 배열을 만든다. 각 항목의 원하는 멤버를 점검하여 조건에 맞는 것만 골라 내면 된다. 다음 예제는 인구 100만 이상인 도시만 출력한다.

function CityList() {

const bigcity = cities.filter(city => city.popu > 100)

return (

<ul>

{bigcity.map(city =>

{city.name} : {city.region}도 {city.area}Km2, {city.popu}만명

</li>

)}

</ul>

</>

)

}

city.popu > 100 조건을 만족하는 도시만 bigcity 배열에 넣었다. bigcity는 원본인 cities 배열에서 조건에 맞는 것만 필터링한 새로운 배열이다. map으로 bigcity를 순회하면 필터링한 도시만 나타난다.

bigcity를 생성하는 filter 호출문은 return 이전에 있어야 하며 미리 가공을 해 두어야 한다. return문 안에 넣으면 필터링한 후 바로 출력할 수 있어 깔끔하겠지만 이건 안된다.

function CityList() {

return (

<ul>

{

const bigcity = cities.filter(city => city.popu > 100)

bigcity.map(city =>

{city.name} : {city.region}도 {city.area}Km2, {city.popu}만명

</li>

)}

</ul>

</>

)

}

이 안은 JSX 영역이기 때문에 명령은 들어갈 수 없고 딱 하나의 결과를 리턴하는 표현식만 들어갈 수 있다. 함수를 호출하고 그 결과를 변수에 대입하는 것은 명령이지 표현식이 아니다. 정 한 곳에서 필터링과 출력을 같이 하려면 필터링 후 바로 연쇄적인 호출로 출력할 수는 있다.

function CityList() {

return (

<ul>

{cities.filter(city => city.popu > 100).map(city =>

{city.name} : {city.region}도 {city.area}Km2, {city.popu}만명

</li>

)}

</ul>

</>

)

}

filter 메서드 호출의 결과는 배열이므로 이 배열에 대해 map 메서드를 호출할 수 있고 map의 결과는 가상 DOM으로 변환한 표현식이므로 별 문제 없다. 다만 사람이 보기에 가독성이 좋지는 않다. 이럴 때는 평이하게 밖에서 필터링을 먼저 하는게 좋다.

filter(city => 다음에 원하는 조건식을 넣어 필터링은 얼마든지 바꿀 수 있다. 논리식으로 평가할 수만 있다면 어떤 조건이든 쓸 수 있다. 다음은 몇 가지 예이다.

면적 500 초과 city => city.area > 500

이름에 '주'자가 들어가는 도시 city => city.name.search('주') != -1

인구 80 미만 또는 면적 1000초과 city => city.popu < 80 || city.area > 1000

비교 연산자, 논리 연산자, 함수 호출 등을 통해 true 또는 false 중 하나를 리턴하면 된다.

조건처리

조건에 따라 다르게 출력해야 하는 경우가 많다. 예를 들어 광역시인 경우는 특별난 표식을 붙인다거나 인구수에 따라 크기를 다르게 출력할 수 있다. cities 배열에는 metro가 진위형인데 true이면 ' 광역시'를 붙이고 false이면 '시'만 붙여 보자. 즉 서울은 서울 광역시로 표시하고 전주는 전주시로 표시하는 것이다.

리액트에서 조건을 처리하는 방법은 크게 세 가지가 있다. 각 방법마다 장단점이 있고 상황에 따라 적절한 방법이 있어 다 알아 두어야 한다. 또 JSX 안에서 조건을 처리하는 방법이 달라 리액트를 이해하는데도 필수적인 기법이다.

1.조건을 처리하는 원론적인 방법은 if문이다. metro 필드의 값에 따라 뒤에 붙일 접미어를 if 문으로 선택하여 {city.name}뒤에 덧붙인다. 코드로 짜 보면 다음과 같다.

function CityList() {

return (

<ul>

{cities.map(city =>

{city.name}{if (city.metro) return ' 광역시' else return '시'}

: {city.region}도 {city.area}Km2, {city.popu}만명

</li>

)}

</ul>

</>

)

}

언듯 보기에는 될 거 같지만 동작하지 않는다. 왜냐하면 JSX 내의 { } 괄호안에는 표현식만 쓸 수 있고 명령은 들어갈 수 없기 때문이다. if return은 결과적으로는 값을 리턴하지만 형식상 임의의 모든 동작을 할 수 있는 명령문이다. 또 { } 블록이 함수가 아닌데 return을 쓴다는 것부터 문법적으로 말이 안된다.

그렇다고 if 문이 꼭 불가능한 것은 아니다. JSX 안에서 명령문을 쓸 수 없다면 JSX 밖으로 빼내면 된다. if 문으로 출력할 문자열을 별도의 변수에 먼저 선택해 놓고 이 변수를 JSX구문에 쓰면 된다.

function CityList() {

return (

<ul>

{cities.map(city =>

{

let isMetro

if (city.metro) {

isMetro = ' 광역시'

} else {

isMetro = '시'

}

return <li key={city.name}>

{city.name}{isMetro} : {city.region}

도 {city.area}Km2, {city.popu}만명

</li>

}

)}

</ul>

</>

)

}

isMetro 변수를 선언하고 조건에 따라 이 변수의 값을 결정한다. 이 구문을 쓸 수 있는 이유는 익명 함수 안이기 때문이다. cities.map 호출문은 JSX안에 있지만 city => { } 블록은 map으로 전달되는 함수일 뿐이다. 그래서 지역 변수를 선언할 수 있고 if문도 쓸 수 있다.

JSX 구문에서는 결정된 변수값을 삽입한다. 논리는 간단하지만 화살표 함수안에 두 개 이상의 명령이 들어 있어 형식이 복잡하다. 본체를 { } 괄호로 한번 더 감싸야 하고 표현식 이전에 명령이 들어갔으므로 가상DOM을 return하는 명령도 필요하다.

서울 광역시는 띄우고 전주시는 붙여야 하니 {city.name}{isMetro} 사이에는 공백이 없어야 하고 접미에 필요에 따라 공백을 넣어야 한다. 공백 처리를 잘못하면 청주 시, 전주 시 등으로 불필요한 공백이 들어간다. 번거롭지만 어쨌거나 가능은 하다. if 문은 원론적인 조건 처리문이고 이 안에서는 복잡한 조건을 평가할 수 있다는 면에서 유연하다.

2.조건을 처리하는 두 번째 방법은 삼항조건 연산자인 ?:이다. 둘 중 하나를 고르기만 한다면 if문 보다 짧고 가독성도 높다.

function CityList() {

return (

<ul>

{cities.map(city =>

{city.name}{city.metro ? ' 광역시':'시'} : {city.region}

도 {city.area}Km2, {city.popu}만명

</li>

)}

</ul>

</>

)

}

?:은 하나의 값을 리턴하는 표현식이므로 JSX내에서 자유롭게 사용할 수 있다. 중간 변수도 필요없고 조건 판단이 필요한 곳에 바로 써먹을 수 있어 편리하다. 둘 중 하나의 값을 반환하는 if else를 완벽히 대체할 수 있다.

두 개의 조건을 점검하는 다중 선택도 삼항 조건 연산자를 중첩해서 쓰면 된다. 예를 들어 광역시 중에도 서울은 더 특별나게 표시하고 싶다면 metro가 true임을 점검한 후 한번 더 이름을 점검해 보면 된다.

function CityList() {

return (

<ul>

{cities.map(city =>

{city.name}{city.metro ? (city.name == '서울' ?' 특별시':' 광역시'):'시'} : {city.region}

도 {city.area}Km2, {city.popu}만명

</li>

)}

</ul>

</>

)

}

서울은 특별시로 표시하고 부산은 광역시로 표시한다. 코드가 약간 복잡하지만 두 번 중첩 정도는 큰 문제가 되지 않는다. JSX 구문 내에서 값을 선택할 때는 삼항 조건 연산자를 쓰는 것이 합리적이다.

3.세번째 방법은 논리 연산자의 쇼트서키트를 활용하는 것이다.

function CityList() {

return (

<ul>

{cities.map(city =>

{city.name}{city.metro && ' 광역시'}{city.metro || '시'} : {city.region}

도 {city.area}Km2, {city.popu}만명

</li>

)}

</ul>

</>

)

}

city.metro가 참일 때만 뒤쪽 식을 평가하여 리턴하고 거짓이면 전체를 무시한다. 표현식 하나를 리턴하므로 JSX에서 사용할 수 있다. 반대로 city.metro가 false일 때를 선택하고 싶다면 || 연산자를 사용한다.

쇼트 서키트는 앞쪽 논리식의 진위 여부에 따라 뒤쪽 조건의 평가 여부를 결정한다는 면에서 간편하다. 그러나 하나의 조건에 대해서만 처리할 수 있어 if문을 대체할 수는 있어도 if else를 대체할 수는 없다. 그래서 참, 거짓에 대해 각각 조건 평가를 따로 해야 한다.

코드가 짧다는 면에서 실용적이지만 쇼트 서키트를 잘 모르는 사람에게는 꽤 생소한 코드라 직관적이지는 않다. 이렇게도 쓸 수 있다는 것이지 삼항조건 연산자보다 딱히 더 쉬운 것은 아니다.

정렬

배열의 정렬은 Array.sort 메서드로 처리한다. sort는 사용자 함수로 두 요소를 전달하고 리턴값으로 순서를 판단하여 재배치한다. 왼쪽이 더 앞쪽이면 음수, 같으면 양수, 오른쪽이 더 앞쪽이면 양수를 리턴한다. 정수값은 뺄셈으로 더 작은값이 앞에 오도록 하여 오름차순으로 정렬한다. 배열 출력 예제에 다음 문장 하나만 넣으면 인구의 오름차순으로 정렬한다.

function CityList() {

cities.sort((c1, c2) => c1.popu - c2.popu)

return (

....

sort 메서드는 map이나 filter와는 달리 새로운 배열을 리턴하지 않고 배열 자체를 정렬한다. 사본 배열을 대입할 필요는 없고 출력하기 전에 정렬만 하면 된다.

내림차순으로 정렬하려면 c2.popu - c1.popu으로 순서를 바꾼다. 뺄셈 결과의 부호가 바뀌므로 정렬도 역순이 된다.

문자열끼리 비교 연산자를 쓰면 사전순으로 누가 더 앞쪽인지는 알 수 있지만 같은지까지 알아내려면 조건문이 필요하다. 뺄셈 연산자를 쓸수는 없고 대신 localeCompare 메서드로 비교하면 정렬에 필요한 세 가지 상태를 리턴한다. 다음 코드는 소속 지역에 대한 오름차순으로 정렬한다.

cities.sort((c1, c2) => c1.region.localeCompare(c2.region))

2차 정렬까지 하려면 더 복잡한 코드가 필요하다. 예를 들어 광역시를 우선 배치하고 같은 급끼리는 면적의 오름차순으로 정렬하려면 다음과 같이 한다.

function CityList() {

cities.sort((c1, c2) => {

if (c1.metro == c2.metro) {

return c1.area - c2.area

} else if (c1.metro) {

return -1;

} else {

return 1;

}

})

return (

<ul>

{cities.map(city =>

{city.name} : {city.region}도 {city.area}Km2, {city.popu}만명

</li>

)}

</ul>

</>

)

}

광역시는 내림차순이고 면적은 오름차순이다.

영문의 경우 대소문자 무시, 한글과 영문의 순서, 선행제로가 있는 숫자끼리의 비교 등에 대해서도 비교 함수를 정확히 작성해야 한다.