React intro

👩‍💻 배운것

React Intro

• React: 선언형, 컴포넌트 기반, 범용가능

• JSX: Javascript를 확장한 문법. JSX를 이용해서 React element를 만든다. 브라우저가 실행하기 위해서는 Babel을 이용한다.

• 하나의 js파일에서 html&js가 했던 일을 한번에 처리

• element class 사용시 className으로 표기

• js식 표현 사용시 중괄호 {} 이용

let name = 'Yonnie';
return(
	<div>
    	My name is {name}
    </div>
);

• function 이름 등은 대문자로 시작
• if문등이 아닌 삼항연산자 사용

<div>
	{
    	(1+1===2)?(<p>true</p>):(<p>false</p>)
    }
</div>

• 여러개의 엘레먼트를 표시할때 map()함수 이용

const content = 딕셔너리.map((post) =>
	<div key={post.id}>
    	<h3> {post.title}> 
        ...

Create React App

• npx create-react-app으로 새로운 리액트 프로젝트 실행하기
• happy hacking!
  
• 이렇게 디렉토리가 생성되고 파일들이 깔린다
• npm run start을 하면 실제 react web app을 개발모드로 브라우저에서 실행 가능
  
• vs code에서 react 파일 포매팅이 흐트러지는 이슈가 생겨서 그걸 해결하느라 시간을 잡아먹었다. vs code 저장시 코드 분산 해결방법 을 보고 해결했다.
• 새로고침 할 때마다 랜덤한 문장 나오는 앱 실습

import './App.css';


function App() {
    const words = [
        "안녕 안녕 나는 요니야",
        "이건 리액트야",
        "옆엔 해리가 자고있지"
    ]


    const getRandomIndex=(length)=>{
        return parseInt(Math.random() * length);
    }

    return ( 
        <div className = "App" >
        <header className = "App-header" > 
        {words[getRandomIndex(words.length)]} 
        </header>   
        </div>
    );
}

export default App;

👫 페어프로그래밍

• Twitter-like app을 리액트를 통해 구현하는 과제

  App 컴포넌트의 후손 컴포넌트로 sidebar 컴포넌트가 있어야 함.
  Font Awesome을 활용하여 트윗메세지 아이콘이 있어야함.
  Counter 컴포넌트가 있어야함 (total수)
  Footer컴포넌트가 있어야함
  트윗 저자의 프로필사진, 유저이름, 생성일자, 메시지 등 구현
  조건부 렌더링을 활용, username 배경색이 특정 색이 되도록 클래스 지정
  

• 단순 불러오기를 하는것 부터 구현했더니 점점 감을 잡았다!
  

import React from 'react';
import './App.css';
import { dummyTweets } from './static/dummyData';
// ! 위 코드는 수정하지 않습니다.
console.log(dummyTweets) // 개발 단계에서 사용하는 더미 데이터입니다.

const Sidebar = () => {
  return (
    <section className="sidebar">
      <i className="far fa-comment-dots"></i>
      <i className='far fa-bell'></i>
    </section>
  );
};

const Counter = () => {
  return (
    <div className="tweetForm__input">
      <div className="tweetForm__inputWrapper">
        <div className="tweetForm__count" role="status">
          total: {dummyTweets.length}
        </div>
      </div>
    </div>
  );
};

const Footer = () => {
  return <div>
    <footer>Copyright @ 2021 Code States</footer>
  </div>;
};
// TODO : Footer 함수 컴포넌트를 작성합니다. 시멘틱 엘리먼트 footer가 포함되어야 합니다.

const Tweets = () => {

  return (
    <ul className="tweets">
      {dummyTweets.map((tweet) => {
        const isParkHacker = tweet.username === 'parkhacker'
        const tweetUserNameClass = isParkHacker 
                  ? 'tweet__username tweet__username--purple' 
                  : 'tweet__username';
        return (
          <li className="tweet" key={tweet.id}>
            <div className="tweet__profile">
            <img src={tweet.picture}></img>
            </div>
            <div className="tweet__content">
              <div className="tweet__userInfo">
                <span className={tweetUserNameClass}> {tweet.username}</span>
                <span className="tweet__createdAt">{tweet.createdAt}</span>
              </div>
              <div className="tweet__message">{tweet.content}</div>
            </div>
          </li>
        );
      })}
    </ul>
  );
};



const Features = () => {
  return (
    <section className="features">
      <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile"></div>
          <Counter />
        </div>
      </div>
      <Tweets />
      <Footer/>
    </section>
  );
};

const App = () => {
  return (
    <div className="App">
      <main>
        <Sidebar/>
        <Features />
      </main>
    </div>
  );
};

// ! 아래 코드는 수정하지 않습니다.
export { App, Sidebar, Counter, Tweets, Features, Footer };

• 제일 애먹었던 조건부 렌더링,,, <<왜 계속 안되나 했더니 css파일에 내가 스페이스를 넣어놨던 것... 세상에.. 이거 해결하고 냈다

👍 후기

• 오늘의 노동요
• 뭔가 html>js를 먼저 익히고 리액트를 하니 좀 낯설고 헷갈린다.. 학부에서 주먹구구로 했던 프로젝트에서 막혔던 부분이 이제야 이해된다 ㅋㅋㅋ 그런거였구나... 내 학점이 조금 더 좋았을수 있었구나...!