[TIL] 기록 47일차

Today I Learned

• React를 활용하여 간단하게 CRUD 기능을 구현해보았다.

• 상위 컴포넌트에서 두가지 이상의 태그를 가질 경우에는 꼭 태그를 감싸줘야한다. 불필요하다고 느낄 때에도 꼭 Fragment를 이용해서라도 감싸줘야한다.

  function App() {
  return (
  <> // fragment
    <Hello />
  </> // fragment
  );
  }

• JSX에서 CSS 효과를 주기 위해서 style 태그의 값들은 camelCase로 작성해야한다.

  • ex) background-color 이 아닌 backgroundColor 로 사용해야 한다.
  • class를 설정해줄 때에도 class="name" 가 아닌 className="name" 로 사용

• 주석을 이용할 때에는 {/* like this */} 와 같은 형식으로 이용한다.

  function App() {
  return (
  <>
   <Hello /> {/* this is 'Hello' component */}
  </>
  );
  }

• 비구조화 할당 문법을 이용하면 비교적 간결하게 코드 작성이 가능함

  // 일반 props를 받았을 때
  function Hello(props) {
  return <div style={{color:props.color}}>안녕하세요 {props.name}</div>
  }

  // 비구조화 할당 문법을 사용했을 때
  function Hello({color,name}) {
  return <div style={{color}}>안녕하세요 {name}</div>
  }