[TIL] D+70 React 오피스아워 + 알고리즘 Basic 4,5,6

📌 오늘 공부한 것

☑ React 오피스 아워

• 리액트를 공부하는 이유 : 선언형/ 컴포넌트
• 리액트 : 컴포넌트 하나에 html css js가 다 있지만 하나의 기능에 대해서 논한다.
• 변수에 들어가는 친구가 “자바스크립트 표현식”
• 리액트는 처음이니까 많이 연습해보기(유어클래스에 있는
  샌드박스)
• 리액트에선 이름을 잘 지어줘야 한다 고유하게
• 프론트앤드는 규정이 많다
• 시멘틱 태그는 정해져있다 (ex) section태그 , header태그

☑ React 코드(오피스 아워 시간 내에)

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React" },
  { id: 2, title: "Installation", content: "You can install React from npm" }
];
export default function App() {
  // ["Hello World", "Installation"];
  // TODO : JSX 활용 슬라이드를 참고해서, 에러를 해결하고 여러 개의 엘리먼트를 표시해보세요.
  // 1. 한 포스트의 정보를 담은 객체가 있습니다.
  // 2. 이 객체를 JSX 표현식으로 바꿔줍니다.
  const postToJSX = (obj) => {
    return (
      <div key={obj.id}>
        <h3>{obj.title}</h3>
        <p>{obj.content}</p>
      </div>
    );
    // 포스트를 JSX로 변경해주는 함수
  };
  // 3. 포스트를 JSX로 변경하여 리턴합니다.
  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {posts.map((obj) => {
        return (
          <div key={obj.id}>
            <h3>{obj.title}</h3>
            <p>{obj.content}</p>
          </div>
        );
        // 포스트를 JSX로 변경해주는 함수
      })}
    </div>
  );
}

☑ 알고리즘 Basic 풀기

• 알고리즘 Basic 4, 5, 6
  4번 split 함수 이용해서 문자열을 배열로 변경한다.
  5번 arr.reverse 메소드 : 배열은 리버스 메소드로 쉽게 뒤집을 수 있음
  6번 후.. 수도 코드 체크하고 다시 풀기