[TIL : 13] React

jabae·2021년 10월 20일
0

TIL

목록 보기
13/44

👩‍💻 Achievement Goals : React Intro

  • React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
    1. 선언형이다.
    2. 컴포넌트 기반이다.
    3. 범용성이 좋다.
  • JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.

    왜 명시적일까? JavaScript의 문법과 HTML의 문법을 동시에 이용 가능하므로 기능과 구조를 한번에 볼 수 있다!

  • React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.

    컴포넌트란 하나의 기능을 구현하기 위해 여러 종류의 코드를 묶은 것인데, 유튜브를 예를 들자면, 서치하는 곳과 콘텐츠로 나눌 수 있다. 이렇게 컴포넌트로 분리하면 독립적이고 재사용이 가능하다. 또 유지보수가 쉬워진다.(만약에 위치를 바꾼다면 그 컴포넌트의 위치만 바꾸면 되기 때문!)

  • create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다.

    yes! 👌

👩‍💻 Achievement Goals

  • Create React App 소개를 보고, Create React App 이 무엇인지 대략적으로 이해할 수 있다.
  • npx create-react-app 으로 새로운 리액트 프로젝트를 시작할 수 있다.
  • create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다.
  • 리액트 랜덤 명언 앱 Hands-on을 따라 간단한 리액트 랜덤 명언 앱을 만들 수 있다.
  • Create React App으로 만들어진 리액트 프로젝트 구성을 대략적으로 이해할 수 있다.

    yes! 👌
    간단하게 감탄사가 나오는 랜덤 페이지를 만들어보았다. 활용한 코드이다.

👩‍💻 Achievement Goals

  • 리액트, JSX 기본 문법을 익힌다.

    JSx를 쓸 때에는 규칙이 있다.

    1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 한다. 여러 엘리먼트를 반환할 경우, opening tagclosing tag로 감싸주어야 한다!
    <div>     // opening tag
    	<div>첫번째</div>
    	<div>두번째</div>
    </div>    // closing tag 이렇게!
    1. CSS class를 지정할 때에는 꼭! className으로 표기해 줄 것! (안 그럼 오류가 뜬다!)
    <div className="~~~">내용</div>
    1. JS 표현식을 사용하려면 중괄호 {}를 이용해야 한다!
    const name = "~~~"
    return <div>~~~{name}~~~</div>
    1. 사용자 정의 컴포넌트는 대문자로 시작해야 한다! (내가 함수를 만든다던가 할때 꼭 이름을 대문자로 시작해주기)
    2. 조건부 랜더링은 if가 아니라 삼항연산자를 사용하자!
      아래는 유저의 이름이 'hacker'인 지 확인하고, 'hacker'가 맞으면 className에 'username-purple'를, 아니라면 'username'을 전달하는 식이다.
    import "./styles.css";
    import { dummyTweets } from "./dummyData";             // 데이터를 불러온다.
    const App = () => { 
      return (
        <ul className="tweets">
          {dummyTweets.map((tweet) => {
            const isHacker = tweet.username === 'hacker'  // 'hacker'인지 확인
            const tweetUserNameClass = isHacker
              	? 'username-purple' : 'username';     // 삼항연산자로 변수에 할당
            return (
              <li className="tweet" key={tweet.id}>
                  {<span className={tweetUserNameClass}>  // 변수를 가져오는 거니까 {}안에 넣기
                		    {tweet.username}</span>}
              </li>
            );})}
        </ul>
      );};
    1. 여러 개의 HTML 엘리먼트를 표시할 때 .map() 함수를 이용한다! (꼭 꼭 처음 key 값에 jsx고유의 속성을 넣어야 한다. //진짜진짜 최후에 인덱스 값을 넣는다.)
    const posts = [
      { id: 1, title: "TIL : 1", content: "Welcome" },
      { id: 2, title: "TIL : 2", content: "Hello" },
      { id: 3, title: "TIL : 3", content: "Nice to meet you" }
    ];
    export default function Blog() {
      const MakeList = posts.map((obj) => {
        return <div key={obj.id}>         // 꼭 key값을 넣어주어야 한다!
                <h3>{obj.title}</h3>
                <p>{obj.content}</p>
                </div>
      });
      return (
        <div>
          {MakeList}    // 중괄호로 감싸기
        </div>
      );
    }

    이러면 post 배열안의 배열이 차례로 <div>~</div>안에 올라가게 된다.

  • 리액트, JSX로 트위틀러를 하드 코딩할 수 있다.

    yes! 🙌

  • 컴포넌트를 먼저 개발하는 Bottom-up 개발 방식에 익숙해진다.

    omg... yes! 👍
    레고를 생각하면 비행기를 조립한다고 할때, 왼쪽 날개, 오른쪽날개 ... 이렇게 부품별로 만들면 나중에 합치기만 하면 된다.

  • npm script로 리액트 개발에 필요한 기본적인 툴을 사용할 수 있다.

    yes! 👏

  • React의 친구들이 있다.

    Angular, Vue, Svelte

📚 그 외

  • 솔직히 HTML과 JavaScript, CSS를 배우면서(잠깐이지만) 이걸로 언제 페이지를 만드는걸까...? 그 많은 정보들을 어떻게 담지...? 했었는데 리액트 참 똑똑하다. 정말 많은 웹사이트, 어플들이 이 리액트를 쓴다는데 이건 정말 필수구나 느껴졌다.
  • 리액트를 사용하면서 휴파님이 왜 자꾸 삼항연산자를 강조하셨는 지 알 것 같다! 알고리즘을 풀 때도 삼항연산자와 맵을 적극적으로 써야겠다. 🤗
  • 버튼을 눌렀을 때 페이지가 바뀌는 걸 끙끙댔는데 새로운 useState, props의 개념을 알고 적용해 보았다. 휴파님께서 보여주시고 바로 지워서 구현하라고 해서 조금 당황했지만... 역시 직접 써 봐야 더 잘 알게 되는 것 같다.😆👌
  • 처음이라 간단한 문제를 푸는 것도 오래 걸렸는데, 다 풀고나니 구조가 이해가 되기 시작했다! 다음 스터디 때도 리액트를 한다는데 그땐 조금 더 수월하게 다룰 수 있을 것 같다!
profile
it's me!:)

0개의 댓글