React : JSX 문법과 연산 (리스트 렌더링)
JSX 문법
JSX : JavaScript + XML
JS 확장 문법이다.
HTML 모양에 가까운데 내부적으로 JavaScript를 사용할 수 있다.
React 는 JSX를 이용해서 컴포넌트를 작성한다.
1. 최상위 부모 요소는 1개로 단일해야한다.
<div>
<button>Hello, world!</button>
</div>2. 함수의 실행문이나 값을 작성할 때에는 {} 를 사용한다
const name = 'lala'
<div>
<button>{name}</button> // lala
</div>3. 주석 작성은 {/**/} 으로 한다. (한줄 작성은 없다)
<div>
{/* 주석입니다. */}
<button>{name}</button>
</div>4. 모두 닫힘 태그를 사용한다.
<input type="text" />5. 태그의 속성 이름이 HTML과 다르다
- 클래스 속성은 className으로 표기한다
- for 속성은 htmlFor 으로 표기한다
- onclick 속성은 onClick 으로 표기한다.
<div>
<label htmlFor="name">이름</label>
<input type="text" id="name" />
<button className={"btn"} onSubmit={handleSubmit}>
버튼
</button>
</div>6. true 값을 갖는 속성은 속성 이름만 사용하고, false는 중괄호로 사용한다. (속성을 만들어서 사용하는 경우 true도 문자열로 넣어주어야 한다)
<>
<input type="text" disabled/>
<input type="text" disabled={false}/>
</>7. 모든 속성의 이름은 카멜케이스를 따른다 (속성 값은 변수로 지정해서 넣을 수 있다 반드시 변수로 넣을 땐 {} 로 넣어야 한다)
8. 속성 값도 중괄호를 사용하며, 문자는 중괄호를 생략하고 ""로 작성해도 된다.
<>
<button className="btn">{name}</button>
<button className={"btn"}>{name}</button>
</>9. 인라인 스타일은 객체 형태로 사용하고, 인라인 스타일 속성명은 카멜케이스로 작성한다.
<button style={{ backgroundColor: "black", color: "white" }}>버튼</button>
JSX 연산
1. 변수, 문자, 숫자 작성 시 문제 없이 출력된다.
<ul>
<li>{name}</li>
<li>{"string"}</li>
<li>{123}</li>
<li>{123 + "a"}</li>
</ul>
2. boolean, undefined, null 값 작성 시 아무것도 출력되지 않는다.
<ul>
<li>{true}</li>
<li>{false}</li>
<li>{undefined}</li>
<li>{null}</li>
</ul>
3. obj는 JSX 연산 에서 바로 사용할 수 없다. => 에러 난다
4. array
- array 의 값을 모두 문자열로 연결해서 출력한다.
- {} 안에 JSX 문법을 배열로 넣으면 한줄씩 띄어서 출력된다.
const arr = ["a", "b", 123, 456];
<ul>
<li>{arr}</li>
<li>{[<div>a</div>, <div>b</div>, <div>c</div>]}</li>
</ul>
5. 조건문
- 삼항 연산자
앞의 연산이 참이면 ? 뒤의 값을 거짓이면 : 뒤의 값을 출력하는 연산
<ul>
<li>{1 + 2 === 2 ? "참" : "거짓"}</li>
</ul>
- AND 연산자
앞의 내용이 참인경우 뒤의 내용까지 실행하는 연산
(앞의 내용이 거짓이면 뒤의 연산을 하지 않음)
<ul>
<li>{1 + 2 === 2 && "거짓"}</li>
<li>{1 + 2 !== 2 && "참"}</li>
</ul>
- OR 연산자
앞의 내용이 참이면 뒤의 연산을 실행하지 않는 연산
(앞의 내용이 거짓이면 뒤의 연산을 함)
<ul>
<li>{1 + 2 === 2 || "거짓"}</li>
<li>{1 + 2 !== 2 || "참"}</li>
</ul>
- IF문 (즉시 실행 함수)
JSX에서는 IF 문을 쓰지 않는다. 함수로 한번 감싼 형태로(익명함수를 선언하고 바로 출력하는 방식으로) 쓸 수 있다.
<li>
{(() => {
if (1 + 2 === 2) return "IF";
else return "ELSE";
})()}
</li>
- 반복문 (리스트 렌더링)
const arr = ["a", "b", 123, 456];
<ul>
{arr.map((item) => {
return <li>{item}</li>;
})}
</ul>위와 같이 arr 값을 map 을 이용하여 렌더링 하면 아래와 같이 arr 값들이 li 태그로 감싸진 화면을 볼 수 있다.
근데 콘솔 창에서 이러한 오류가 뜬다
React 가 요소들이 나열이 되었을 때 각각의 아이템들에는 고유의 ID인 key 값이 전달되어야 한다.
이 리스트에서 새로운 리스트로 추후 변경이 된다면 해당 key 값으로 React 내부에서 구분할 수 있어야 하기 때문에 필수적으로 넣어줘야한다.
리스트 렌더링에서의 Key?
Key는 리스트를 매핑하여 동일한 컴포넌트를 여러개 렌더링 할 때 각 컴포넌트에 전달되는 고유한 값이다.
리스트에 추가, 변경, 삭제된 노드를 해당 Key 값으로 식별하고 이를 통해 필요한 리렌더링만 수행하기 위해 사용된다.
때문에 리스트의 순서가 변경되어도 동일한 key 값이 유지되는 index는 key값으로 넣으면 안된다.
=> 배열 내에서 순서가 변경되어도 각 컴포넌트의 key 값이 변경되지 않는 고유한 값으로 설정해야한다.
const arr = ["a", "b", "c"];
<ul>
{arr.map((item) => {
return <li key={item}>{item}</li>;
})}
</ul>위와 같이 arr 값이 전부 다른 값이면 key 값으로 전달해도 된다
만약 arr 값이 같은 값이 존재한다면?
const arr = ["a", "b", "c", "c"];
동일한 key 값이 적용되어 경고가 뜬다
이러한 경우 임시로 이렇게 쓸 수 있다.
<ul>
{arr.map((item, index) => {
return <li key={`${item}${index}`}>{item}</li>;
})}
</ul>하지만 고유한 값을 넣는것이 더 좋다.