React 기초지식들

React를 사용하는 이유

1. Single Page Application

페이지 전환이 새로고침없이 부드럽게 동작한다.

html 파일을 1개만 쓴다.

다른 페이지를 보여주고 싶을 때 html 부분만 샥 갈아치워서 보여준다.

 

2. html 관리

html을 함수, array, object 이런 곳에 보관하고 재사용할 수 있다.

 

3. React Native

모바일 앱개발 쌉가능

 

4. 회사에서 요구해서  

취직은 해야지?

 

React 설치

 

1. nodsjs를 설치한다.

2. 폴더를 만든다.

3. 우클릭 - 서비스 - 폴더에서 새로운 터미널 열기

4. 터미널에 npx create-react-app {폴더명} 적기 

5. vscord로 폴더를 연다.

 

끗!

 

React에서 사용하는 JSX 문법 3개

react에서는 html 대신에 JSX문법이라는걸 사용한다.

대표적인 JSX문법을 알아보자.

 

1. html에 class 넣을 땐 className="{class명}" (JS에서는 class="{class명}")

2. 변수를 html에 꽂아넣을 때는 {변수명}

3. html에 style속성 넣고싶으면 <div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>

 

그외에도 이런게 있다.

• 컴포넌트명은 대문자로 시작
• return(<></>) 리턴안에는 하나의 엘리먼트로 묶어줘야한다.

이거안된다.

return(

<div></ div>

<div></ div>

)

•  if대신 삼항연산자 사용
• map()사용시 key값넣기

 

useState

var, let, const 변수 대신 react는 useState를 사용할 때도 있다.

 

변수는 변경되면 재렌더링을 해달라고 따로 요청을 해야한다.

하지만 State는 변경되면 재렌더링이 자동으로 이루어진다.

 

그러므로 State는 자주 변경되거나 html에 표기되는 자료에 사용된다.

 

import { useState } from 'react'; // import해온다.

let [변수명, set변수명] = useState("초기값");
// State변경함수는 기본적으로 변수명앞에 set을 붙인다.

 

state변경법

 

state변경함수인 set변수명()을 이용해서 변경해야한다.

 

let [제목, set제목] = useState("나는 잘생겼다.")

//이런식으로 하면안된다.
제목 = "사실 못생김"

// 이런식으로 해야한다.
set제목("사실 못생김")

 

 

onClick

JSX에서는 onClick안에 함수를 넣어야한다.

외부에서 만들어서 넣거나 내부에서 화살표함수를 사용해서 넣어도된다.

onClick={()=>{}}

가끔 C가 소문자여서 에러날때도 있다.

// 일반적인 html
<div onclick="실행할 자바스크립트~~~">
// JSX
<div onClick={실행할함수}>
<div onClick={()=>{console.log()}>

 

화살표함수란

함수를 간단히 화살표로 표현한 함수

 

일반함수

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

 

화살표함수

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

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

 

리액트에서 array/object state 수정시 유의사항

 

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

이런식으로 코드를 짜서 버튼을 누르면 글제목이 변경될 것 같지만 변경되지 않는다.

왜냐하면 useState는 기존의 값과 변경된 값이 같으면 변경시켜주지 않기때문이다.

 

? 글제목과 copy는 다른데요?

array/object 동작원리 때문에 같다고 생각한다.

let data1 = [1,2,3];
let data2 = data1;   //복사문법임

data1은 램에 [1,2,3]을 저장한다.

data2는 [1,2,3]을 복사하지 않고 data1의 주소를 복사한다.

그래서 data1의 값이 변경되면 data2도 변경이된다. (충격...)

 

그래서 글제목과 copy가 같은 주소를 나타내기때문에 같다고 생각한다.

 

그래서 아래와 같이 변경을 해야한다.

let copy = [...글제목];
copy[0] = '여자코트 추천';
글제목변경(copy)

여기서 ...은 array/object를 벗겨내주는 역할을한다.

그래서 copy는 글제목의 주소가 아닌 글제목 내부의 값을 저장한다.

 

 Component 문법

함수를 따로 빼서 넣을 수 있다.

아래의 코드를 보면 Modal컴포넌트를 만들어서 App 컴포넌트에 넣어주고있다.

function App (){
  return (
    <div>
      (생략)
      <Modal></Modal>
    </div>
  )
}

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

1. component 작명할 땐 영어대문자로 보통 작명한다.

2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없다. 최상위 태그가 하나만 있다. (fragment문법)

3. function App(){} 내부에서 만들면 안된다. 

왜냐면 function App(){} 이것도 다시보니 컴포넌트 생성문법이니깐

4. <컴포넌트></컴포넌트> 이렇게 써도 되고 <컴포넌트/> 이렇게 써도 된다.

5. 화살표함수로 만들어도된다.

function Modal(){
  return ( <div></div> )
}

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

 

컴포넌트함수는 언제 만들까?

- 사이트에 반복해서 출현하는 HTML 덩어리들은 Component로 만들면 좋다.

- 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋다.

- 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 Component로 만드는게 좋다.

- 또는 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나눠서 작업을 분배하기도 한다. 

 

React에서 조건문 만들기

 

{}에 감싸야한다.

// 요런식으로 사용하면된다.
function App(){
	return(
    	{조건문}
    )
}

근데 JSX에서는 if/else문을 사용하면 이상해진다.

대신 삼항연산자를 사용한다.

// JSX
function App(){
	return(
    	{조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드 }
    )
}

 

map사용

 

반복되는 <div>태그를 만들때 사용된다.

 

모든 array 자료 우측에 map()을 붙여서 사용한다.

첫번째 매개변수는 array의 값들을 하나씩 가져오고

두번째 매개변수는 0부터 시작하는 정수들을 가져온다.

// 배열의 개수만큼 1이 찍힌다.
let 어레이 = [2,3,4];
어레이.map(function(){
  console.log(1) // 1, 1, 1
});


// a는 배열의 값을 하나씩 가져온다.
let 어레이 = [2,3,4];
어레이.map(function(a, i){
  console.log(a) // 2, 3, 4
  console.log(i) // 0, 1, 2
});



// return 오른쪽에 적으면 배열에 담아준다.
let 어레이 = [2,3,4];
let newArray = 어레이.map(function(a){
  return a * 10
});
console.log(newArray) // [20, 30, 40]

 

이걸 어떻게 div태그를 만들때 사용하냐면

 

function App (){
return (
    <div>
      (생략)
      { 
        [제목,제목2,제목3].map(function(a, i){
          return (
          <div>
            <h4>{ a }{ i }</h4> // a는 배열안의 값, i는 0부터 시작하는 정수이다.
          </div> )
        }) 
      }
    </div>
  )
}

// 제목 0
// 제목2 1
// 제목3 2
// 이렇게 출력된다.

 

props

 

컴포넌트에서 다른 컴포넌트로 state를 옮겨줄 수 있다.

이때 부모 컴포넌트에서 자식 컴포넌트로만 옮겨줄 수 있고 다른 경우는 안된다.

 

보내고 싶은 자식 컴포넌트에 아래 코드처럼 보내고

<Modal 글제목={글제목}></Modal>

 

매개변수에 props를 넣어서 가져오면된다.

function Modal(props){ props.글제목}

function Modal({글제목}){ 글제목}

 

function App (){
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal 글제목={글제목}></Modal> // 글제목 state를 자식컴포넌트인 Modal로 전송한다.
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.글제목[0] }</h4> // props.글제목을 통해서 불러올 수 있다.
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

// 이런 방법도 있음
function Modal({글제목}){ //{}로 감싸서 가져온다.
  return (
    <div className="modal">
      <h4>{ 글제목[0] }</h4> // 글제목을 통해서 불러올 수 있다.
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

 

input 

유저의 입력을 받을 수 있는 박스를 생성하는 태그

여러가지 input 태그가 있다 그외에는 알아서 찾아보길

<input type="text"/>
<input type="range"/>
<input type="date"/>
<input type="number"/>
<textarea></textarea>
<select></select>

 

이벤트핸들러

input에 무언가 입력시 코드를 실행시킬때는 이벤트핸들러를 부착한다.

대표적으로 onChange, oninput등등 있다.

이벤트핸들러도 종류가 많으니 한번 찾아보길

 

input에 입력한 값을 가져오는법

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

console.log(e)를 통해서 여러가지 메서드를 확인해보는 것도 좋다.

 

e.target 이러면 현재 이벤트가 발생한 곳을 알려준다.

e.preventDefault() 이러면 이벤트 기본 동작을 막아준다.

e.stopPropagation() 이러면 이벤트 버블링도 막아준다.

 

이런것들을 찾아 쓸 수 있다.

 

이걸이용해 useState에 저장해서 쓸 수 있다.

function App (){

  let [입력값, 입력값변경] = useState('');
  return (
    <input onChange={(e)=>{ 
      입력값변경(e.target.value) 
      console.log(입력값)
    }} />
  )
}

 

배포하기

내가 만든 사이트를 배포하여 다른 사람들이 들어오게 할 수 있다.

 

배포하기 전 체크사항

 일단 미리보기 띄워볼 때 콘솔창, 터미널에 에러나면 안된다.

http://codingapple.com/blog/ 이런 하위 경로에 배포하고 싶다면 package.json 파일에 들어가 수정한다.

 

"homepage": "http://codingapple.com/blog",

 리액트 라우터가 설치되어있다면 라우터가 제공하는 basename="" 속성을 추가하는게 라우팅 잘 된다.

 

build

state, JSX, <컴포넌트>, props 이런 문법들은 브라우저가 해석할 수 없다.

이런것을 html, css, js 문법으로 변환시켜주는 작업이 필요한데 이것을 컴파일 또는 build라고한다.

 

터미널에서 이렇게 치면된다.

npm run build

고럼 이렇게 build파일이 생긴다.

github로 들어가서 우측상단에 + 버튼을 누르고 New Repository누른다.

 

그런 다음 레파지토리 이름을 자신아이디.github.io로 설정하고 Add a README file을 체크해준다.

(나는 이미 만들어서 경고창이 떠있다.)

 

그럼 다음 build폴더안의 파일(build파일자체를 옮기면 안된다.)들을 드래그 앤 드롭으로 옮겨주고 초록버튼눌러주면 끝!!

(흔한 github pages 에러) 왜 사이트 주소로 접속했는데 404 페이지가 뜨죠?

- 10분 더 기다려보십시오.

- ctrl + shift + r 을 이용해 새로고침 해보십시오.

- 혹은 repository 생성하실 때 님들아이디.github.io가 아니라 뭔가 잘못적은겁니다. 

정확히 안적었으면 그냥 다시 하나 새로 만듭시다. 

그외에 상세한 부분은 코딩애플 홈페이지에 가서 확인하자.