Hello ReactWorld -1 설치 / state / component

본 포스팅은 코딩애플님의 리팩트 강의를 수강한 후 참고하여 작성하였습니다.

프로젝트 생성하기

npx create-react-app

원하는 경로에서 위 명령어를 실행하면
기본적인 리액트 프로젝트가 생성된다.
(마치 start.spring.io에서 프로젝트 파일을 생성해주는것과 유사하다.)

에디터를 통해 생성된 프로젝트를 생성하면 위와같은 프로젝트가 완성된다.

npm start

명령어를 통해 애플리케이션을 실행시키면

쨘! 헬로 ReactWorld 페이지가 생성된다.

• App.js : 메인페이지
• node_modules : 프로젝트에 필요한 모든 라이브러리를 모아둔 폴더
• public : html이나 css등 static 파일들을 모아두는 폴더
• src : 실제 코드 짜는 폴더
• package.json : 프로젝트 정보들을 쭉 나열한 파일

리액트 기본동작원리 - JSX

index.html을 먼저 띄워두고
어떠한 함수들을 호출하여 html요소들을 return
예를들면

function APP() {
  return (<h1>바보</h1>);
}

과 같이 작성시 index.html을 '바보'라는 요소로 다시 그려줌
return 구문 안쪽에는 한개의 태그로 시작해서 닫혀야함
병렬로 두개의 태그를 사용할 수 없음

function APP() {
  return (
  <div><h1>바보</h1></div>
  <div><h1>말미잘</h1></div>
  );
}
// 잘못된 코드

JSX 문법

• 1. 요소명에 클래스이름을 줄 때는 class가 아닌 className으로 명시

<div className="bg-block"> 

• 2. 변수선언(데이터바인딩)의 경우 중괄호를 이용

function App() {
  let post = '재밋는 코딩애플 강의 ˃ᴗ˂';
  return (
    <div className="App">
      <div className="bg-black">
        <h4>블로그</h4>
      </div>
      <h4>{ post }</h4>
    </div>
  );
}

{ post } 위치에 '재밋는 코딩애플 강의'라는 요소가 들어감.

• 3. style을 직접 적용하고 싶을때는 style = { {스타일명 : '값'} }

<h4 style={ {color:"blue", fontSize:'16px'} }>{ post }</h4>

주) style 속성을 줄 경우 기존 css와 달리 camelcase로 작성 ('-'를 빼기로 인식할 수 있음)

변수선언 - state

javascript의 destructuring 변수와 비슷한 접근
let [a,b] = ['변수명',(함수)];

import { useState } from 'react';

function App() {
  let [a, b] = '압구정 코성형 맛집';
  <div className="list">
  	<h4>{ a }</h4> //압구정 코성형 맛집
	<p2>2월 17일 발행</p2>
   </div>
}

state 쓰는 이유

import { useState } from 'react';

function App() {
  let a = '강남 필러 맛집';
  let [b, c] = '압구정 코성형 맛집';
  <div className="list">
  	<h4>{ a }</h4> // 강남 필러 맛집  
	<p2>2월 17일 발행</p2>
   </div>
  <div className="list">
  	<h4>{ b }</h4> // 압구정 코성형 맛집 
	<p2>2월 17일 발행</p2>
   </div>
}

기본적인 변수로 선언한 값을 사용시 자동으로 랜더링 되지 않음
state쓰면 할당된 값이 변경시 자동으로 html 재랜더링이 이루어짐

State 변경하는법

let [good_count, count_change] = useState(0);  // 기본값 0

function addGood() {
  count_change(good_count+1);
}

return (
    <div className="App">
      <div className="list">
        <h4> 홍대 네네치킨 <span onClick={ addGood }>👍</span>{ good_count }</h4>
        <p2>맛있는치킨집</p2>
      </div>
    </div>
);

state의 기본값으로 0을 설정
span태크 영역을 클릿기 addGood 함수가 실행되는 코드.
해당 함수는 기존의 good_count값을 받아서 +1 해준다.

Component

드디어 나왓다.. 이녀석...

긴 html 덩어리를 한개의 태그로 줄인것

• 1. STEP1
  function()을 만든다.
  다른 function의 내부가 아닌, 완전히 별개의 위치에 위치시켜야 한다.
• 2. STEP2
  return문 안에 보여줄 html을 담아준다.
• 3. STEP3
  원하는 위치에 <함수명></함수명>을 위치시킨다.

function App() {
  return (
  	<div>
      <DetailModal></DetailModal>
    </div>
  );
}

function DetailModal() {
  return(
    <div className='modal'>
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  );
}