삐제제의 개발 노트

컴포넌트를 폴더로 관리할 때 create-react-app 으로 생성한 프로젝트에서의 방법은 css 파일의 이름 뒷부분에 module을 붙여주는것이다. 그 다음, CSS를 적용할 컴포넌트에 import를 해준다. 원래는 이런식으로 import 했다면, 이런식으로 import 해준다! 그리고 클래스네임을 자바스크립트 오브젝트 처럼 사용한다! 이런식으로 하게되면, css를 우리가 정해준 className으로 받는것처럼 보이지만 className이 임의로 생성된다고한다. 보시다시피, 이렇게 하면 navList 라는걸 다른 파일에서 반복해서 사용 할 수 있게된다! (원래는 클래스네임이 중복되면 문제가 발생했었음!!) 그리고 그 곳에서도 클래스 네임이 임의로 생성될것이다! 나쁘지않은 방법이지만, 최고의 방법은 아..

class App extends React.Component { constructor(props) { super(props); console.log("constructor"); } state = { count: 0, }; add = () => { this.setState((currnet) => ({ count: currnet.count + 1 })); }; minus = () => { this.setState((current) => ({ count: current.count - 1 })); }; componentDidMount() { console.log("component rendered"); } componentDidUpdate() { console.log("I just updated"); } com..

컴포넌트는 두 가지 종류로 나누어진다. Function 컴포넌트 / Class 컴포넌트 이 두 종류로 나뉘게 되는데, 생김새는 다음과 같다. // Fucntion Component function App() { return Hello i'm function component.> } // Class Component class App extends React.Component { render() { return Im a class component; } } 각각 차이점을 비교하면, Function 컴포넌트는 항상 무언가를 return 하여, screen에 표시한다. Class 컴포넌트는 React.Component 를 반드시 상속받아야 한다! = App Component는 React.Component를 확..

이번 포스팅에서는 컴포넌트의 prop을 검사해주는 아주 똘똘한 라이브러리를 적어놓으려고한다. "왜 PropTypes를 사용하는건가요?" 그 이유는.. 우리는 사람이기때문에 코드를 작성하다가 실수 하는 경우가있다. (아래의 foodILike는 { name, image, rating } 의 정보를 각각 담고있는 배열이다.) function App() { return ( {foodILike.map((dish) => ( ))} ); } 예를들어 이런 코드가 있을때.. 실수로 rating에 숫자를 집어넣어야하는데 문자를 넣었다던지 하는 실수.. 컴파일 에러는 안되서 동작은 잘 되지만, 뭔가를 나도 모르게 실수했을때, 그 실수를 잘 찾도록 도와주는 라이브러리가 바로 PropTypes 이다. 기본적인 사용법은 아주 ..

자바스크립트 공부를 어느정도 이제 했고, 이제 슬슬 리액트라는것도 배워볼 때가 된것같아서 오늘 드디어 리액트라는 쎅시한 녀석과의 첫만남을했다. 우선 컴포넌트, JSX, props가 무엇인지 정말 입문 파트정도만 일단 배웠는데, 리액트 첫걸음 기념으로 간단하게 정리해보고 싶어서 글을 남긴다. 우선 컴포넌트라는건 부품의 의미로 해석할 수 있을것같다. npm install create-react-app (앱 이름) 으로 처음 리액트를 설치하면 src라는 폴더에 App.js 파일을 볼수있는데 기본적으로 있는데, import React from "react"; function App() { return Hello; } export default App; 여기선 function App() 이 녀석이 컴포넌트다. 분..