2021년08월15일

Note

React

• React 프로젝트 셋팅

npx create-react-app 프로젝트명

• 실행

npm start

• React는 내가 원하는 곳에 html element 를 넣어주는 역할을 한다.
  • virtual dom 을 만들어서

Component

• HTML 을 반환하는 함수이다.
• JSX는 javascript와 HTML 의 조합이다. 컴포넌트는 JSX를 반환하는 것이다.
• 컴포넌트 간의 데이터 통신은 props를 이용한다.

const Animal = ({name, color, pic}) => {
  return <div>
      <h2>I like {name}</h2>
        <h4>{color}</h4>
        <img src={pic} alt={name}/>
    </div>
... 
function App() {
  return (
      <Animal name="lion"
                color="yellow"
                    pic="/images/lion.png"
    />
    )
}

• 전달한 props의 값이 정상적인지 유효성 체크를 하려면 prop-types를 사용한다.
• npm install prop-types

Animal.propTypes = {
  name: PropTypes.string.isRequired,
    pic: PropTypes,string.isRequired,
    color: PropTypes.string,
}

log

• 광복절이다. 직장에 다녔으면 휴일이라 딱 실감이 났을텐데 어제부터 관련 뉴스가 나와서 알게되었다. 광복절 관련 뉴스를 보면 열받는 소식이 종종 들려온다. 빠른 시일 내에 해결되었으면 하는 문제들이 많다. 이런걸 보면 나는 일개 국민으로서 뭘 할수있을까 하는 생각이 들기도 한다.
• 진짜 오랜만에 30분 달리기했다. 아버지랑 같이 달렸는데 1시간이나 달리셨다. 저번에 헬스장 갔다가 코로나 검사를 받으신 이후로 이제 헬스장 안가려고 하신다. 그래서 이틀에 한번은 따라갈테니 동생과 셋이서 운동하기로 했다.
• 오픈소스 컨트리뷰션 아카데미 첫 미팅이 있었다. 일주일 내내 생각한 문제지만 과연 내가 여기서 뭘 남길 것인가를 진지하게 생각해야겠다. 그리고 꼭 정리하고 되새겨야 한다. 일주일간 눈팅을 했는데 다른 개발자분들을 보며 정말 배울 것이 많다는 생각이 들었다. 나도 기여를 꼭 할 수 있도록 하고, 지금 이런걸 할 수 있는 기회를 정말 정말 감사히 여겨야겠다.
• 한 1년만에 리액트 공부를 했다. 옛날 자료를 보아서 class component로 되어있었는데 댓글에 왜 이걸로하냐는 말 천지였고 설명하는 분도 자신은 현재 hooks를 사용하고 있다고 하셨다. 중요한 것은 왜 지금은 function component를 많이 쓰는지 그걸 알아야하는 것 같다.