Code States 17일차

오늘의 키포인트

리액트

나의 이해

리액트 : html에 쓸 내용들을 js에 씀, 전체 새로고침을 안해서 페이지 넘어갈때 빠름

 

문법 및 중요

리액트 : 프론트 앤드 개발을 위한 js 라이브러리 / 선언형, 컴포넌트 기반, 범용성

JSX( Js XMl ) : React에서 ui를 구성할떄 사용하는 문법//js를 확장한 문법
Babel : JSX를 브라우저가 바로 실행 못시켜서 브라우저가 이해하게끔 js로 컴파일해주는거

컴포넌트 : 하나의 기능구현을 위해 여러 종류의 코드를 묶어놓은것 컴포넌트 기반으로 작성시 서로간의 의존성이 없어서 독립적, 재사용 가능

JSX문법
여러 엘리먼트를 작성하고자하면 하나의 태그로 감싸줘야함 // return하려면 하나의 태그로 감싸줘야함 , 배열도 리턴 됨

CSS class 속성 지정하려면 className 으로 표기해야함 // class로 작성하면 react에서는 html클래스 속성 대신에 자바스크립트 클래스로 받아들임

js를 쓰고자 한다면 중괄호 써야함 // 안쓰면 일반 텍스트로 인식
중괄호쓰면 js로 인식하므로 return해줘야함  중괄호로 묶으면 function(){}와 같고, 소괄호로 묶으면 ()안의 값이 return

react엘리먼트가 jsx로 작성되면 대문자로 시작해야함(사용자 정의 컴포넌트) 함수같은거// 소문자면 html엘리먼트로 인식

조건부는 if가 아닌 삼항연산자
if를 쓸수 있긴함  
function(){
if(){ return}
else{ return}()   이렇게 함수화해주고 실행해주면됨

 

여러 개의 html 엘리먼트 표시시에는 map()함수를 넣어야함 // map 함수 사용시에는 ‘key’ JSX 속성 넣어야함

ex)

export default function Blog() {

   const blogs = posts.map((post) => (

    <div key={post.id}>

      <div>

        <h3>{post.title}</h3>

        <p>{post.content}</p>

      </div>

    </div>

  ));

  return <div className='test'>{blogs}</div>

}

 

기타

npm install react-router-dom : React router을 이용하기 위해 설치