S2U4정리

<div>
  <div>
    <h1>hello</h1>
  </div>
  <div>
    <h2>hello</h2>
  </div>
</div>

규칙2 : 클래스 이름 표시를 className 으로 해준다.

<div className="greeting">hello!</div>

규칙3 : javascript 표현식 사용 시, 중괄호 {} 이용 한다!

  function App() {
   const name = '이유정'
   return (
      <div>
   hello, **{name}  ** 
      </div>
   )
  }
  

규칙4 : 사용자 정의 컴포넌트는 대문자로 시작!!

function Hello(){
 return <div>hello!</div>
  }
 
 fucntion HelloWorld(){
 return **<Hello />*
```*
 }
 
 규칙5 : 조건부를 써줄때 삼항연산자를 사용한다. 
 
 
<div>
   {(1+1 ===2) ? (<p>true</p>) : (<p>false</p>)}
</div>
 
 규칙 6 : 여러 개의 HTML 엘리먼트를 표시할 때, map()함수를 이용한다. 
 
 

const posts = [
 {id:1, title: 'hello world', content:'welcome to learning react!'},
 {id:2, title: 'installation', content:'you can do it'}  
 ]
 
 function Blog(){
 const content = posts.map((post)=>
  <div key={post.id}>
    <h3>{post.title}</h3>
    <p>{post.content}</p>
  </div>
  );
    return (
    <div>
      {content}
    </div>
    );
 }
    
   
    내가 만든 폴더 위치에서 밑처럼 실행을 시킨다. 
npx create-react-app 파일명
    
    그 후 vscode 터미널에서 
    npm run start 하면, react 실행 화면이 나온다. 
 
###   틀린퀴즈
const Hello = () => {
   return (
       [<div>안녕하세요</div>,<div>반갑습니다.</div>]
   )
} 
 설명: D. 배열의 각 요소는 각각 변수에 담길 수 있는 하나의 JSX 표현식이기 때문에 맞는 보기입니다.
 
 + 리액트 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트 두 종류가 있습니다. 기존에는 클래스형 컴포넌트를 주로 사용했었지만, 최근에는 함수형 컴포넌트를 많이 사용합니다.
 
 + 컴포넌트를 먼저 완성시키고, 레이아웃에 따라 유동적으로 컴포넌트의 위치를 변경할 수 있는 상향식 개발 (Bottom-up) 방식에 적합하다.
 
 
 let langs = ["JavaScript", "HTML", "Python"];
 let viewLangs = () =>  {
   return langs.map((it) => {
     return <p>{it}</p>;
   });
 };

 return (
   <div>
     {viewLangs}
   </div>
 );
 A. viewLangs 가 화살표 함수 표현식으로 선언되어 있기 때문에 함수를 호출하는 연산자 () 를 써야 작동합니다. {viewLangs()}
 
 let langs = ["JavaScript", "HTML", "Python"];

 let viewLangs = langs.map((it) => {
     return <p>{it}</p>;
   });
   
 return (
   <div>
     {viewLangs}
   </div>
 );
 B. map 함수 호출 결과를 viewLangs 변수에 잘 담아주었습니다.
 
 let langs = ["JavaScript", "HTML", "Python"];

 return (
   <div>
      {langs.map((it) => {
       return <p>{it}</p>;
     })} 
   </div>
 );
 C. 중괄호{}를 사용하여 JavaScript를 내부에 표현해 주었기 때문에 올바르게 작동합니다. 주의할 점은 화살표함수에서 중괄호{}를 쓰게 되면 꼭 return 이 존재해야 합니다. return 이 없다면 undefined 를 반환하게 됩니다.
 
 let langs = ["JavaScript", "HTML", "Python"];
 return (
   <div>
     {langs.map((it) => (
       <p>{it}</p>
     ))}
   </div>
 );
 
 D. 화살표함수에서 () 를 사용하면 () 안의 값이 return 값이 됩니다.