TIL- 22.03.22 화

1. Input(학습)

Reference

1. SSR과 CSR 이 영상 하나로 끝내기! (SEO 해결 포함)
2. 코딩애플 리액트
3. 자바스크립트 array.map 을 설명해준다!

---

배열 내장함수(메서드) map

• 기능: 원본 배열의 요소만큼 반복하며 함수를 실행하여 새로운 배열을 반환.
• map 내부에 들어가는 함수는 배열의 요소, 배열의 인덱스, map()을 호출한 배열 세가지 인수를 받을 수 있다.
• 주의사항: 함수의 return값을 반드시 지정해주어야 새로운 배열의 값을 반환한다.
  • 함수의 return값이 없으면 [undefined, undefined, undefined] 가 반환됨
• 사용법: 새 배열 = 원본배열.map(함수);

// 한줄짜리 화살표 함수 사용시 예제

const likes = ['1', '5', '4', '6'];
const newLikes = likes.map(count => `👍 ${count}`);

console.log(newLikes); // ['👍 1', '👍 5', '👍 4', '👍 6']

// 다른 함수를 가져다 쓸 경우 예제

// const likes = ['1', '5', '4', '6'];
const addDays = count => `2022-03-22 ${count} 좋아요`;
const newLikes2 = likes.map(addDays);

console.log(newLikes2);
// ['2022-03-22 1 좋아요', '2022-03-22 5 좋아요', '2022-03-22 4 좋아요', '2022-03-22 6 좋아요']

React로 ui개발시 반복문 사용하는 2가지 방법

1. 배열 메서드 map 사용하기
2. 함수를 만들고 함수 안에서 빈 배열 생성후 for문 사용하여 배열에 push하고 return값으로 받기

• JSX내에서 반복문을 사용할수 없기 때문에 map으로 반복문 대신 사용하거나 함수에 for문 넣어서 사용.
• 반복되는 html코드를 쉽게 사용하고자 return값에 반복될 내용을 넣어 사용함.

props

• 상위 컴포넌트의 state를 하위 컴포넌트에서 사용하려면 props 문법을 사용해야 한다.
• 사용법
  1. 상위 컴포넌트 안에서 쓴 하위 컴포넌트에 작명하기. 예시: postName={postName}
  2. 하위 컴포넌트의 매개변수로 props를 받아 객체 데이터 받아오는 방식으로 접근하여 사용.

function App() {
    return (
        let [postName, changePostName] = useState([
    '다람쥐가 너무 귀여운 이유',
    '가나초콜렛 할인 이벤트 정보',
    '나비보벳따우가 무슨 뜻인가요?',
      ]);
        <Modal postName={postName}></Modal> // 작명하기
    );
}

function Modal(props) {
  return (
    <div className="modal">
        <h2>{props.postName[0]}</h2>
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  );
}

2. Output(복습)

3. Reminder

• 리액트 컴포넌트는 반드시 파스칼 케이스로 작명하여 JSX가 React의 component이지 정규 html 태그가 아니라는 것을 명시한다. 소문자로 시작하면 에러 발생.
• git 로컬에서 삭제한 파일 원격 저장소에 적용하기 : add시 git add -u 사용. 커밋과 푸시 과정은 동일.
• 참조타입은 변수에 할당시 값이 아니라 데이터의 주소를 저장하므로 const로 선언된 객체의 내용을 수정할 수 있다.(재할당은 안됨.)
• JSX내에선 직접적으로 조건문이나 반복문을 사용할 수 없다. 조건문과 반복문을 사용하는 방법은?
• 템플릿 리터럴로 보간( ${변수 or 표현식} )을 사용하여 변수의 값이나 표현식의 연산결과를 문자열로 보여줄수 있다.
• 한줄짜리 화살표함수는 {}, return 생략가능. 매개변수가 1개일 경우 ()도 생략가능.
• 자바스크립트 모듈 개념 숙지하기