개발자로 살아남기

props에 대해서는 https://jyejye311.tistory.com/105에서 설명하였다. props로는 특정 값 뿐만 아니라 HTML을 넘기는 방법도 있다. 이전에 사용한 코드에서 일부만 수정하여 html을 props로 넘겨보았다. 우선, 부모 컴포넌트는 다음과 같다. 더보기 import './App.css'; import { useState } from 'react'; import ChildApp from './ChildApp'; function App() { // count라는 state와 count의 setter를 동시에 정의하는 과정 const [count, setCount] = useState(0); // up 버튼 클릭했을 때 동작하는 함수 const onClickUpCount = (..

컴포넌트 사이의 데이터 전달은 props를 통해 이루어진다. 함수형 컴포넌트에서, 다른 컴포넌트의 state를 가져오고 싶으면 아래와 같은 단계를 거쳐야한다. 1. 전달해주는 측 state를 정의한 함수이다. 여기서는 정의한 다른 컴포넌트를 호출하면서, 해당 컴포넌트에 이 state를 넘겨줄 이름을 지정한다. 2. 전달받는 측 해당 state를 가져오려는 함수이다. 마치 c,cpp,java에서 인자를 넘기듯이, function을 정의할 때 해당 state를 넘겨주기 전 정의한 이름을 인자로 써주면 된다. 이렇게만 보면 어려우니, 예시를 보자. -예제 우선, state를 정의하고 메인으로 사용하는 컴포넌트 부분이다. 이전 https://jyejye311.tistory.com/104를 참고하면, 이 컴포넌트..

windows 환경에서 설정을 시작했다. 처음에는 배포를 위해 Docker를 먼저 깔았으나, 나중에 실제 배포 시 제대로 설정 하는걸로 결정. 1. npm 설치 : 사이트에서 다운로드 받아 설치하면 된다. 2. powershell 접속 3. "npm install --global yarn" : npm으로 yarn을 설치한다. global로 설치해야 전역에서 yarn을 인식할 수 있다. 4. "npm install -g create-react-app" : 리액트 앱을 생성하는 명령어 다운로드 5. "create-react-app [원하는 app 이름]" : 원하는 위치로 이동해 설정하고 싶은 app 이름의 리액트 앱을 생성한다. * 여기서는 "hello-world"라는 이름으로 생성하였음. 6. "cd [..