리액트 - 기초 문법과 지식

1. 배열 스프레드 연산자로 생성하는 이유
2. 컴포넌트는 언제 만들면 좋은가
3. Array.map() 메서드에서 바로 return을 주면
4. 동적인 UI 만드는 순서
5. html에서 나타나지 않게 하려면 null을 사용한다.
6. component를 여러개 생성하지 않고 배경 색상만 다르게 변경하기

 

배열 스프레드 연산자로 생성하는 이유

const manToWoman = (index, setPostTitle, originalData) => {

배열을 스프레드 연산자(...)로 새롭게 생성하지 않고 그대로 복사를 하게 되면 완전하게 같은 배열이 된다.

때문에 state자체가 변한 것을 인지하지 못한다.

따라서 스프레드 연산자를 이용한다.

    let temp = [...originalData];

    temp[index] = "바뀐 제목";

    setPostTitle(copy);

};

---

컴포넌트는 언제 만들면 좋은가

1. 반복적인 html 축약할 때

2. 큰 페이지를 생성할 때

3. 자주 변경되는 내용을 포함할 때

---

Array.map() 메서드에서 바로 return을 주면

[a,b,c].map()에 return "리턴값" 과 같이 곧바로 return을 넣으면

["리턴값","리턴값","리턴값"] 바로 return의 값을 배열의 길이만큼 반복한 배열이 반환된다.

---

동적인 UI 만드는 순서

1. 디자인을 먼저 다 하기

2. UI의 현재 상태를 state로 저장하기

3. state에 따라 UI가 어떻게 달라질지 (보일거면 true, 안보일거면 false) 등으로 작성하기

---

html에서 나타나지 않게 하려면 null을 사용한다.

{modal[index] === true ? <Modal  /> : null}

---

component를 여러개 생성하지 않고 배경 색상만 다르게 변경하기

component의 html 태그 안에서<div style = {{ background : props.backgroundColor }}> 처럼 매개 변수를 저장하고

컴포넌트에서 props를 전달할 때 색상값을 전달하도록 한다.

<Modal backgroundColor={'#f00'} /> 빨간색 배경

<Modal backgroundColor={'#369'} /> 푸른색 배경

---