React : 블로그 제작 & 기초 문법

React 왜 쓰는 걸까?

---

1. Single Page Application 만들때 쓴다.

Single Page Application 이란? 인스타그램, 페이스북 같이
모바일 앱 처럼 새로고침 없이 화면이 바뀔 수 있도록 부르럽게 동작하는 웹 페이지를 말한다.

2. React를 쓰면 html 재사용이 편리하다.

var arr = [<p>안녕</p>, <p>반갑</p>]

3. 같은 문법으로 앱 개발이 가능하다.

React 설치와 개발환경 셋팅

---

개발환경 셋팅

1. node.js 검색해서 설치 (최신버전으로 맞추는게 좋다.)

2. vscode 에디터 검색해서 설치

프로젝트 생성

1. 폴더 생성 Shift + 우클릭, PowerShell/터미널 열기 누름

2. 열린 터미널에 npx create-react-app 프로젝트명

3. 에디터에서 File-Open Folder로 프로젝트 폴더 오픈

4. 미리보기 띄우기는 터미널에서 npm start

명령어와 프로젝트 폴더 의미

---

• npx: 프로젝트 생성해주는 명령어 제공
• node_modules 폴더: 라이브러리 코드 보관함
• public 폴더 : static 파일 모아놓는 곳
• src 폴더 : 코드 짜는곳
• package.json : 프로젝트 정보(버전, 라이브러리 명)
• App.js 👉 index.js 👉 index.html
  
  

레이아웃 만들 때 쓰는 JSX 문법

---

class

• class 넣을 땐 className

변수

• 변수 넣을 땐 {중괄호}
• 데이터 바인딩은 {중괄호}

stlye

• style 넣을 땐 style= {{스타일 명: '값'}}

데이터를 변수말고 state에 담기

---

• return() 안에는 병렬로 태그 2개 이상 기입금지
• 자료 감깐 저장할 땐 변수 혹은 state 문법을 쓴다.

😎 state 만드는법

1. import {useState}

2. let [작명1, 작명2] = useState(보관할 자료)

   • 작명1 : state에 보관했던 자료 나옴
   • 작명2 : state 변경 도와주는 함수

Q. 왜 state를 써야할까?

A. 일반 변수는 갑자기 변경되면 html에 자동으로 반영이 안됨.
state는 갑자기 변경되면 state 쓰던 html은 자동 렌더링 됨.

Q. state는 언제 써야할까?

A. 변동시 자동으로 html에 반영되게 만들고 싶으면 state 쓰자.

정리 : 자주 변경 될 거 같은 html 부분은 state로 만들어 놓자.

state 변경하는 법

---

lint 끄는 기능

/* eslint-disable*/

onClick 쓰는 법

onClick = {} 안엔 함수를 넣어야 함.

1. 함수 이름 넣기

function 함수(){
	실행할코드
}
return (
	<div onClick={함수}>
)

2. 함수 문법을 바로 넣기

return (
    <div onClick={ function(){ 실행할코드 } }> 
	<div onClick={ () => { 실행할코드 } }>
)

state 변경하는 법

❌ 등호로 변경금지
⭕ state 변경함수 (새로운 state)

function App(){
  
  let [ 따봉, 따봉변경 ] = useState(0);
  return (
      <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉 + 1) } } >👍</span> { 따봉 }</h4>
  )
}

array, object state 변경하는 법

• array/object 다룰 때 원본은 보존하는게 좋음
• state 가 array/object 면 독립적 카피본을 만들어서 수정해야함.
• ... 👈 스프레드 문법을 사용하면 화살표가 다른 완전 독립적인 array 복사본을 생성해줄 수 있음.

function App(){
  
  let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      let copy = [...글제목];
      copy[0] = '여자코트 추천';
      글제목변경(copy)
    } }> 수정버튼 </button>
  )
}

state 변경함수 특징

• 기존 state == 신규 state의 경우 변경 안해줌

array/object 특징

• array/object 담은 변수엔 화살표만 저장됨
• 변수1 & 변수2 화살표 같으면 변수1 == 변수2 비교해도 true 나옴
• 위와 같은 특징은 array, object가 reference data type이라서 그렇다.
  
  

Component 컴포넌트

---

컴포넌트를 사용하면 더러운 html을 한 단어로 줄여
코드를 처음 보는 사람도 미래의 나도 이해가 쉽도록 할 수 있다.

컴포넌트 만드는 법

1. function 만들고 (다른 function 밖에 만들어야 한다.)
2. return() 안에 html을 담는다.
3. <함수명></함수명>으로 호출해서 사용한다. (<함수 />둘 다 가능)

참고 1.

return () 안에 html 병렬 기입 하려면 의미 없는 <div> 대신 <></> 사용 가능하다.

어떤걸 컴포넌트로 만들까

1. 반복적인 html을 축약 할 때
2. 큰 페이지들
3. 자주 변경되는 것들 (유용할 수 도 있다.)

컴포넌트의 단점

1. state를 가져다 쓸 때 문제가 생긴다.
   (A함수에 있던 변수는 B함수 에서 마음대로 가져다 쓸 수 없다.)

참고 2.

컴포넌트 만드는 문법 (화살표 함수ver)

const Modal = () => {
  						return (
                          	<div></div>
                        )
					}	

동적인 UI 만들기

---

동적인 UI 만드는 step

1. html css로 미리 디자인 완성
2. UI의 현재 상태를 state로 저장 (형식은 자유)
3. state에 따라 UI가 어떻게 보일지 작성
   ex1) 조건식 ? 참일 때 실행 할 코드 : 거짓일 때 실행 할 코드
   ex2) modal == true ? <modal/> : null

map()

map : 많은 div들을 반복문으로 줄이고 싶은 충돌이 들 때 사용한다.

map() 사용법

1. array 자료 갯수 만큼 함수안의 코드를 실행해준다.
2. 함수의 파라미터는 array 안에 있던 자료이다.
3. return에 뭐 적으면 array로 담아준다.
   ex) 글제목.map(function(a, i) {})
   - a : array 안에 있던 데이터
   - i : 반복문 돌 때 마다 0부터 1씩 증가하는 정수
   

참고

반복문으로 html 생성하면 key = { html마다 다른 숫자} 추가 해야 경고 문구가 안뜬다.

props

---

props : 자식이 부모의 state를 가져다 쓰고 싶을 때 사용한다.

state 전송하는 법

1. <자식 컴포넌트 작명 = { state이름 }/>
2. props 파라미터 등록 후 props.작명 사용

• props 전송은 부모👉자식만 가능. 컴포넌트가 많아지면 props 쓰는게 귀찮아짐.
• props로 일반 문자도 전송 가능.
  
  

input

---

<input> 태그

• <input></input> 혹은 <input/> 형식이여야 한다.
• type에는 text range checkbox 등이 있다.
• <select></select> : 드롭다운 인풋
• <textarea></textarea> : 큰 인풋 박스

onChange / onInput

<input>에 뭔가 입력시 코드 실행하고 싶을때 사용한다.

<input>에 입력한 값 가져오는 법

<input onChange = {(e) => {
  {e.target.value}
}

이벤트 버블링

• 클릭 이벤트는 상위 html로 퍼진다. => 이벤트 버블링
• 이벤트 버블링을 막는법 : e.stopPropagation()

<input>에 입력한 값 저장하려면?

• state 변수를 만들어서 e.target.value를 할당 해주면 된다.
• state 변경함수는 늦게 처리된다. => 비동기 처리

class를 이용한 옛날 React 문법

---

class 문법으로 컴포넌트 만들기

constructor super render 채워 넣어야 한다.

class Modal extends React.Component {
	constructor() {
      super()
    }
  	render() {
      return (
        <div>안녕</div>
      )
   	}
}	

class 컴포넌트에서 state 만들기

class Modal extends React.Component {
	constructor() {
      super()
      this.state = {
        name: 'Kim',
        age: 20
      }
    }
  	render() {
      return (
        <div>{this.state.age}</div>
      )
   	}
}	

class 컴포넌트에서 state 수정하기

class Modal extends React.Component {
	constructor() {
      super()
      this.setState = {
        age: 21
      }
    }
  	render() {
      return (
        <div>{this.state.age}</div>
      )
   	}
}	

class 컴포넌트에서 props 전달하기

class Modal extends React.Component {
	constructor(props) {
      super(props)
      props.state = {
        name: 'Kim',
        age: 21
      }
    }
  	render() {
      return (
        <div>{this.props.age}</div>
      )
   	}
}	

참고

---

JS 배열 요소 삭제 메서드

• pop() : 배열의 마지막 요소 삭제
• shift() : 배열의 첫 번째 요소 삭제
• splice() : (제거할 요소의 인덱스, 제거할 요소의 개수)
• filter() : 조건에 일치하는 새 배열을 생성
• delete() : 배열 요소를 삭제가 아닌 빈 값으로 변경

Q. 왜 새로고침하면 초기화 될까?

A. 새로고침 시 html,js 파일을 다시 읽기 때문이다.

마지막 커밋 제목 수정하는 법

git commit --amend -m '수정내용'