02.react 기초문법

---

react official page

1.JSX

• HTML 과 비슷하게 생긴 JSX 는 react 에서는 JSX 문법을 사용함

🔷 특징

1. 태그에 class 를 주고 싶으면 <div className="클래스명"> 이라는 문법을 사용해야 합니다. (HTML의 <div class=""> 와 같음)

2. 데이터 바인딩을 쉽게해줌 - { 변수명, 함수 등 }

   • 데이터 바인딩 : 데이터를 HTML에 넣어 주는것

   • src, id, href 등 속성도 같은 방식으로 가져 옵니다.

// in App.js
function App() {
  let posts = "강남 고기 맛집";

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <h4>{posts}</h4>
    </div>
  );
}

1. JSX 에서 style 속성 집어 넣을 때

   • style ={object 자료형으로 만든 스타일}

   • camelCase 작명관습에 따라 속성명도 camelCase 로 작성해야 합니다.

<div style=>개발 Blog</div>

🔷 정리

• 최상위 요소가 하나여야 합니다.

• 최상위 요소 리턴하는 경우, () 로 감싸야 합니다

• 자식들을 바로 랜더링 하고 싶으면, <> ,</> 을 사용해합니다 => Fragment 라고 함

• 자바스크립트 표현식을 사용하려면, {표현식} 을 이용합니다

• if 문은 사용할 수 없습니다 => 대신 삼항연산자 혹은 && 을 사용합니다

• style 을 이용해 인라인 스타일링이 가능합니다.

• class 대신 className 을 사용해 class 를 적용할 수 있습니다.

• 자식요소가 있으면, 꼭 닫아야 하고, 자식 요소가 없으면 열면서 닫아야 합니다. 예) <p> 내용</p> <br/>

2.useState

🔷 데이터를 보관 하기위한 방법

1. 변수를 넣거나

2. state 에 넣거나

state 는

1. 변수 대신 쓰는 데이터 저장공간

2. useState() 을 이용해 만들어야 합니다

3. 문자, 숫자, array, object 다 저장가능

📌 Q. 그럼 그냥 변수 쓰면 되는데, 굳이 state 를 만들어 써야 하는 이유는?? (state 의 장점!!)

• Web 이 App 처럼 동작하게 만들고 싶어서 (즉, state 안에 데이터가 변경이 될 때, HTML 이 자동으로 재 렌더링 됩니다)

• 일반 변수에 저장된 데이터는 변경 할 경우, 새로 고침이 일어난 다음에 재 렌더링 되기 때문에 깜박임이 생기는데 state 는 자동으로 그냥 변경되기 때문에 새로고침 없이 됨

• 그렇기 때문에 react 에서 저장된 거의 모든 데이터는 state 에 저장해서 쓰는 이유가 여기에 있습니다

• 단! 수시로 바뀌지 않은 경우는 그냥 하드 코딩 해도 되고, 변수를 통해서 사용하는것이 편하다.

/// in App.js 샘플 예제
function App() {
  // useState 를 사용하면 [a,b] 형태의 arr 를 만듬
  // a 는 '남자 코트 추천' 의 text 이고, b 는 state 를 정정해주는 함수가 저장됨
  let [title, editTitle] = useState([
    "남자 코트 추천",
    "강남 우동 맛집",
    "자바스크립트 독학",
  ]); // ES6 destructuring 문법

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className="list">
        <h3>{title[0]}</h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{title[1]}</h3>
        <p>2월 18일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{title[2]}</h3>
        <p>2월 19일 발행</p>
        <hr />
      </div>
    </div>
  );
}

3.Event

Event 다루는 범

• react 에서 클릭할때 실행되는 작동하는거 (addEventLister 와 같은것..)

  • onClick = {클릭될 때 실행할 함수}

  • onClick = {() => {실행할 내용}} (arrow function 사용)

• state 로 작성된 것을 데이터 변경하는 방법

  • state 만들때 같이 생성되는 함수를 이용해서 state 에 있는 data 를 변경해서 만듬

// in App

let [like, editLike] = useState(0);

<div className="list">
  <h3>
    {title[0]}{" "}
    <span
      onClick={() => {
        editLike(like + 1);
      }}
    >
      👍
    </span>{" "}
    {like}{" "}
  </h3>
  <p>2월 17일 발행</p>
  <hr />
</div>;

4.setState

• 수정된 데이터를 만드는데 근데, state 를 Deep copy 해서 수정해야 합니다. 참조형 데이터 이기 때문에

• 그래서 data 를 수정할 떄 spread operator 를 사용해서 (...) deep copy 해서 사용해야 합니다 immutable data 이기 때문에..

-

🔑 Array, Object state 데이터 수정 방법

• 일단 변경함수 (setState) 를 사용해야 합니다.

• 변경함수 (대체할 데이터) 를 사용해야 합니다

• state 안에 있는 데이터를 직접 수정하면 안됩니다.

• 원래 있는 데이터를 spread operator 를 사용해서 deep copy 해야 합니다.

• 정리하자면

  • 1. 일단 기존 state 카피본 만들고 (Deep copy)
  • 1. 카피본에 수정사항 반영하고
  • 1. 변경함수()에 집어넣어서 적용하기

let [title, editTitle] = useState([
  "남자 코트 추천",
  "강남 우동 맛집",
  "자바스크립트 독학",
]); // ES6 destructuring 문법
let [like, editLike] = useState(0);

function edit() {
  let newArr = [...title];
  newArr[0] = "여자코트 추천";
  editTitle(newArr);
}

return (
  // 버튼을 누르면 '여자 코트 추천'
  <button onClick={edit}>버튼</button>
);

5.component

• HTML 을 줄여서 쓸 수 있는 방법:

  • react의 component 문법

• Component 만드는 법

  • 1.함수 만들고 이름 짓고

  • 2.축약을 원하는 HTML 넣고

  • 3.원하는 곳에서 <함수명>

• 📌 Component 주의 사항!!

  • 1.이름은 대괄호

  • 2.return() 안에 있는건 태그 하나로 묶어야함 (즉, div 태그가 여러개 나올수 없음) - 그래서 return() 내부를 묶을때 의미없는 <div> 를 사용하기 싫으면 <> </> 을 제일 바깥쪽에서 사용해서 나머지 코드를 하나로 묶을 수 있습니다.

  • 위치는 function App() {} 과 동일 선상에서 만들면 됩니다.

• Component 를 만들어두면 관리가 편해짐

• 🔷 Component 를 만드는 기준은?

  • 반복적으로 출현하는 HTML 코드들

  • 자주 변경되는 HTML UI 들

  • 다른 페이지 만들 때도 컴포넌트로 만듦

• 🔶 Component 의 단점은?

  • state 쓸때 복잡해짐 (변수의 범위는 function 안에서만 있기 때문에)

  • 상위 component에서 만든 state 를 쓰려면 props 문법을 이용해야 합니다

// 이런식으로 하위 component 를 만들어서 사용함
function App() {
  return (
    <div className="App">
      // 2가지 방식 다 component 를 불러 올 수 있음
      <Modal></Modal>
      <Modal />
    </div>
  );
}

function Modal() {
  return (
    <div className="modal">
      <h2>Title</h2>
      <p>Date</p>
      <p>Details</p>
    </div>
  );
}

6.Modal UI

• react 에서 { } 안에 if 문을 사용할 수 없기 때문에 삼항연산자를 사용함

// if 문
if (a < 3) {
  console.log("Yes");
} else {
  console.log("NO");
}

// 같은 의미로 삼항 연산자  - JSX 에서 사용함
{
  a < 3 // 조건식
    ? console.log("Yes") // true 일때 식
    : console.log("NO"); // false 일때 식
}

• react 에선 UI 를 만들때 데이터를 이용합니다 (마치 모달창을 켜고 닫는 스위치)

• react 에서는 on/ off 가 필요한 UI 데이터는 state 를 사용해서 만듬

• 사이트 첫 로드시 모달창은 안보임 제목을 누르게 되면 모달창을 만들게 구형하기

function App() {
  let [modal, editModal] = useState(false);

  return (
    <div className="App">
      <div className="list">
        <h3
          onClick={() => {
            editModal(true);
          }}
        >
          {title[2]}
        </h3>
        <p>2월 19일 발행</p>
        <hr />
      </div>
      {
        modal === true ? <Modal /> : null // 텅빈 HTML 이라는 뜻
      }
    </div>
  );
}

📌 Q. button 을 누르면 modal 창이 나왔다가 click 하면 다시 들어가게 하는 code 는?

• ! 을 붙이게 되면 true 를 false 로 바뀌게 되고, false 는 true 로 바꿔 줌

function App() {
  let [modal, editModal] = useState(false);

  return (
    <div className="App">
      <button
        onClick={() => {
          editModal(!modal);
        }}
      >
        Modal 버튼
      </button>
      {
        modal === true ? <Modal /> : null // 텅빈 HTML 이라는 뜻
      }
    </div>
  );
}

7.map / for

react 에서 반복문 사용하기

- JSX  중괄호 내에는 for 를 바로 못 사용합니다.

- `{ map() }` 함수를 사용해서 반복문을 사용합니다.

- HTML 을 반복하고 싶으면 `{반복할데이터.map()}` 을 사용합니다

📌 map() 이란.

• map() 은 유사 반복문 입니다

• 하나씩 꺼내서 함수를 실행해서 출력하는것

let arr = [2, 3, 4];

// arr 내에 모든 데이터에 똑같은 작업을 시켜 주고 싶을때 사용
let newArray = arr.map((a) => {
  return a * 2;
});
console.log(newArray); // [4, 6, 8] 출력

• 위의 코드에서 title 을 반복문을 통해서 만들기

  return (
    <div className="App">
      <div className="black-nav">
        <div >개발 Blog</div>
      </div>
      <button onClick={ edit }>버튼</button>

      {/* 반복문 */}

      {
        title.map(i => {
          return <div className="list">
            <h3>{i} <span onClick={() => { editLike(like + 1) }}>👍</span>{ like }</h3>
            <p>2월 18일 발행</p>
            <hr />
          </div>
        })
      }
    </div>
  );
}

for 반복문을 사용하고 싶다면..

• 먼저 for 로 된 반복문을 만든 다음에 { } 에 넣고 for 문을 사용할 수 잇음

// loopUI 라는 반복문 함수를 만든 다음에 값을 return 시키고 그 값을 함수 형태로 가져다가 사용하는 방법입니다.

function App() {
    function loopUI() {
    let arr = [];
    for (let i = 0; i < 3; i++) {
      arr.push(<div>안녕</div>)
    }
    return arr
  }

  return (
    {
      loopUI()
    }
  )
}

• for in / of 도 마찬가지로 적용해서 사용하면 됩니다.

8.props

• 자식이 부모의 state 를 가져다 쓰고 싶을때는 props 를 사용게 됩니다.

• props 라는 문법을 통해 데이터를 전송을 해줘야 자식 component 에서 data 를 사용할 수 있게 됩니다

• 🔑 props로 자식에게 state 전해 주는 법

  • 1.<자식컴포넌트 변수명={state명}/>

  • 2.자식컴포넌트에서 props 라고 parameter 입력 후 사용

function App() {
  let [title, editTitle] = useState(['남자 코트 추천', '강남 우동 맛집', '자바스크립트 독학']);

  return (
    {
      modal === true
      ? <Modal title={ title }/>
      : null // 텅빈 HTML 이라는 뜻
    }
  )
}


function Modal(props) {
  return (
    <div className="modal">
      <h2>{ props.title[0] }</h2>
      <p>Date</p>
      <p>Details</p>
    </div>
  )
}

• 위의 코드 처럼 function Modal() 은 function App() 의 자식 요소이기 때문에 props 를 사용해서 자식 요소에다가 전송할 수 있습니다.

🔶 Q. props 를 이용해서 제목을 누를 때 각각 다른 모달창이 뜨게 하는 방법..

• 일단 modal 창 만드는 법

  • 모달창 보이는 / 안보이게 상태정보를 state 에 저장하고

  • state 가 true 면 모달창 보여주고

  • state 가 false 면 모달창 숨겨주고

• 그렇다면 각각 다른 모달창 제목을 만드는 법

  • 몇번째 제목 눌렀는지 상태정보를 state 에 저장하고

  • state가 0일때는 0번째 제목 출력

  • state가 1일때는 1번째 제목 출력

• UI 만드는 법:

  • 1.UI와 관련된 중요 정보들을 state로 저장해 놓고

  • 2.state에 따라서 UI가 수정되게 만들면 됩니다

//  1. 먼저 state 에다가 btnTitle 이라는 number 변수를 만듭니다.

function App() {
  let [btnTitle, editBtnTitle] = useState(0);

// 2. map 함수 parameter 에서 첫번째 i 는 map 에서 하나씩 꺼내는 것을 말하고 j는 순서를 가리킴 key={반복수 0~반복끝까지의 수} key = {} 값은 parameter 로 받은 j 가 됨
  return (
          {
        title.map((i, j) => {
          return <div className="list" key={j}>
            <h3 onClick={() => { editBtnTitle(j) }} >{i} <span onClick={() => { editLike(like + 1) }}>👍</span>{ like }</h3>
            <p>2월 18일 발행</p>
            <hr />
          </div>
        })
      }
      // 3.props 를 사용하기 위해 modal component 에서 `변수명={state명}`을 사용해서 export 해줌
      {
        modal === true
        ? <Modal title={title} btnTitle={btnTitle}></Modal>
        : null // 텅빈 HTML 이라는 뜻
      }
  )
}
// 4.title에서 0, 1, 2 가 순서대로 들어 오게 하게 끔 props 로 btnTitle 의 번호를 순서대로 가져옴
function Modal(props) {
  return (
    <div className="modal">
      <h2>{props.title[props.btnTitle] }</h2>
      <p>Date</p>
      <p>Details</p>
    </div>
  )
}

Props 와 State

• Props 는 컴포넌트 외부에서 컴포넌트에게 주는 데이터 입니다.

• State 는 컴포넌트 내부에서 변경할 수 있는 데이터 입니다.

• 둘다 변경이 발생하면, 랜더가 다시 일어날 수 있습니다.

Render 함수

Props 와 State 를 바탕으로 컴포넌트를 그립니다. 그리고 Props 와 State 가 변경되면, 컴포넌트를 다시 그립니다. 컴포넌트를 그리는 방법을 기술하는 함수가 Render 함수 입니다.

9. Event Handling

• HTML DOM 에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 해야 합니다.

• JSX 에 이벤트를 설정할 수 있습니다.

• camelCase 로만 사용할 수 있습니다 (onClick, onMouseEnter)

• 이벤트에 연결된 JS 코드는 함수 입니다. (event = {함수} 와 같이 씁니다)

• 실제 DOM 요소들에만 사용 가능합니다 (리액트 컴포넌트에 사용하면, 그냥 props 로 전달합니다)

10. Component LifeCycle

리액트 컴포넌트는 탄생부터 죽음까지 여러지점에서 개발자가 작업이 가능하도록 method 를 오버라이딩 할 수 있게 해준다.

Declarative

• Design simple views for each state in your application and React will efficiently update and render just the right components when your data changes

여러가지 탄생부터 죽음까지 선언적으로 표현된 함수들을 실해 하기 때문에 각 initialization 과 Mounting 에서 탄생되서 Unmounting 되서 죽음까지 되는것임

Component 생성 및 마운트 (v16.3 이전)

constructor -> componentWillMount -> render (최초 랜더) -> componentDidMount

Component props, state 변경 (v16.3 이전)

componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

componentWillReceiveProps

• props 를 새로 지정했을 때 바로 호출 됩니다.

• 여기는 state 의 변경에 반응하지 않습니다.

  • 여기서 props의 값에 따라 state 를 변경해야 한다면, setState 를 이용해야 state 를 변경합니다 (그러면 다음 이벤트로 각각 가는 것이 아니라 한번에 변경됩니다)

shouldComponentUpdate

• props 만 변경 되어도, state 만 변경되어도, props & state 둘다 변경되어도 newProps 와 new State 를 인자로 해서 호출

• return type 이 boolean 입니다.

  • true 면 render

  • false 면 render 가 호출되지 않습니다.

  • 이 함수를 구현하지 않으면, 디폴트는 true

componentWillUpdate

• 컴포넌트가 재 랜더링 되기 직전에 불립니다

• 여기선 setState 같은 것을 쓰면 안됩니다.

componentDidUpdate

• 컴포넌트가 재 랜더링을 마치면 불립니다.

Component 라이프사이클 변경 (v16.3 이후)

• constructor -> getDerivedStateFromProps -> render -> componentDidMount -> getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate (dom 에 적용) -> componentDidUpdate -> componentWillUnmount

10.input

• react 에서 사용자의 input 을 받는 법

  • 사용자가 input에 입력한 값을 state 로 저장합니다.

  • <input onChange={}/> 을 사용하여 input 창이 변경 할때 마다 기록에 남기게 합니다.

  • (e) => { editInput(e.target.value)} callback 함수를 사용해서 event 가 변경 될때마다 state 에 값을 변경시켜서 사용합니다.

// 1. input state 를 생성합니다.
let [input, editInput] = useState("");

// 2. editInput 을 통해 state 의 변경된 것을 input 에 할당 합니다.
<input
  onChange={(e) => {
    editInput(e.target.value);
  }}
/>;

11.응용

• input 창을 통해서 글 발행 하기

function App() {
  // 1. input 관련 state 생성
  let [input, editInput] = useState("");

  // 2. 버튼 클릭 시 input data 가 변경 될 수 있게 function 생성
  function addPublic() {
    let titleCopy = [...title]; // deep copy title state
    titleCopy.unshift(input); // titleCopy 에 첫번째 배열로 input 데이터 삽입
    editTitle(titleCopy); // editTitle 을 통해 title state 를 titleCopy 로 수정
  }
  return (
    // 3. input, button 실행시  input 데이터가 title state 에 저장되서 화면 구형
    <div className="publish">
      <input
        onChange={(e) => {
          editInput(e.target.value);
        }}
      />
      <button onClick={addPublic}>저장</button> // 2 번 함수 실행
    </div>
  );
}

12.class 문법 (구 버전)

• 예전에 사용되는 class 사용해서 function 을 대신해서 프로필을 만드는것임

class Profile extends React.Component {
  constructor() {
    super();
    this.state = { name: "kim", age: 30 };
  }

  changeName = () => {
    this.setState({ name: "Park" });
  };

  render() {
    return (
      <div>
        <h3>프로필입니다</h3>
        <p>저는 {this.state.name} 입니다</p>
        <button onClick={this.changeName}>이름변경</button>
      </div>
    );
  }
}

class 사용방법

• class를 하나 만들고 이름짓습니다.

• 그리고 React.Component라는 이상한 것을 extends한다고 써줍니다.

• constructor(){} 함수를 언급해줍니다.

• render(){} 함수 안에 원하는 HTML을 적습니다.

그럼 이제 을 원하는 곳에 첨부하면 Component 만들기 끝입니다.

class 대한 설명

• class는 데이터/함수를 보관하는 덩어리입니다.

• extends는 덩어리를 만들 때 오른쪽에 있는 놈 성질을 물려받아서 덩어리를 만들겠다는 소리입니다.

• React.Component는 컴포넌트 성질을 갖고있는 덩어리입니다.

• 이것을 extends 해서 class를 만들면 우리가 계속 사용해왔던 컴포넌트를 만들어낼 수 있습니다. (리액트 라이브러리 사용법일 뿐입니다)

• class를 만들어두시면 class가 가지고 있는 데이터를 그대로 복사해서 사용할 수 있는 object를 쉽게 만들 수 있습니다 .

• 혹은 class가 가지고 있는 데이터를 그대로 복사해서 사용할 수 있는 class도 쉽게 만들 수도 있고요. (extends 문법을 씁니다)

react 에서 class

암튼 가끔 그러고 싶을 때가 있어서 쓰는 문법인데 리액트는 왜 저러냐면

1. 리액트 만든 사람들이 컴포넌트와 관련된 데이터/함수들을 보관하기 위해서 React.Component라는 class를 만들어두었고

2. 그걸 extends 를 이용해서 복사하면 여러분만의 컴포넌트를 만들 수 있는거고

3. 그리고 그렇게 하시면 여러분 컴포넌트는 리액트관련 데이터/함수를 자유롭게 쓸 수 있는겁니다.

class 를 사용할 때, state값을 바꾸는 법

• 버튼만들고 onClick 이런거 넣는건 똑같습니다.

• state를 변경하실 땐 this.setState() 라는 내장함수를 꼭 쓰셔야합니다.

• 그리고 소괄호()안에는 바꾸고 싶은 state 이름과 값만 적어주시면 됩니다.

class 에서 커스텀 함수 만드는법

• 위의 코드 처럼 버튼안에 setState() 안에 복잡한 것을 함수로 빼려고 합니다

1. 버튼안에 있는 코드가 너무 길어서 함수로 빼고 싶어서 함수를 만들었습니다.

2. 모든 커스텀 함수는 저기 저 changeName 자리에 만들어주시면 됩니다. 그리고 필요한 코드를 담습니다.

3. 그리고 changeName 이라는 함수 이름을 필요한 자리에 넣어줬습니다. 근데 this 까먹지맙시다.

class 결론..

🔑 function 대신해서 예전에는 주로 사용 했으나 react 공식 문서 에서도 function 문법을 사용하라고 권장합니다.

🔶 🔷 📌 🔑

Reference

• react official page- https://reactjs.org/docs/getting-started.html

• coding apple - https://www.youtube.com/watch?v=LclObYwGj90&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy

• fastcampus - https://fastcampus.co.kr/dev_online_frontend