🥬 상추의 공간

Introduction state를 변경하면 모든 component는 다시 실행되고 모든 code들도 다시 실행된다. const App = () => { const [counter, setCounter] = React.useState(0); const onClick = () => setCounter((current) => current + 1); console.log("call an api"); return ( {counter} Click me ); }; 리렌더링 될 때마다 반복 실행되어도 괜찮은 코드도 있을 테지만, 컴포넌트가 처음 render 될 때만 코드가 실행되길 원할 수도 있다. 예를들어, API로 외부 데이터를 가져올 때 컴포넌트 처음 렌더링되는 그 순간에만 API 요청을 하고 이후에 stat..

Props 아래 코드는 그닥 효율적인 코드가 아니다. 버튼 개수를 늘릴수록 복붙해야하는 양이 많아지기 때문이다. const SaveBtn = () => { return ( Save Changes ); }; const ConfirmBtn = () => { return ( Confirm ); }; const App = () => { return ( ); }; 컴포넌트를 새로운 정보를 props 인자로 전송하면서 재사용하자. props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다. 부모에 props를 사용하면 자식 컴포넌트(함수)의 인자로 객체가 들어가게 된다. (컴포넌트는 단지 어떤 JSX를 반환하는 함수다.) props는 자식으로 전달되는 유일한 인자이며, 부모에서 전송한 ..

배웠던걸 기반으로 useState를 이용해 단위변환 기능을 만들어보자. 먼저 input에 입력한 값이 화면에 실시간으로 보이도록 만들어보자. onChange를 통해 사용자가 다른 값을 입력할 때마다 value 업데이트 시킨다. const App = () => { const [minutes, setMinutes] = React.useState(0); const onChange = (e) => { setMinutes(e.target.value); }; return ( Super Converter Minutes You want to convert {minutes} Hours ); }; input의 value를 연결시켜주는 이유는 input 값을 외부에서 수정해주기 위해서다. label에서 for은 js용어가 ..

Understanding State state는 기본적으로 데이터가 저장되는 곳이다. 아래 코드는 별로 좋지 않은 방법이다. const root = ReactDOM.createRoot(document.getElementById("root")); let counter = 0; function countUp() { counter += 1; } const Container = () => ( Total clicks: {counter} Click me ); root.render(); // 렌더링 컴포넌트는 화면 페이지를 처음 로드했을 때 딱 한번 렌더링되므로 그 이후로는 어떤 작업을 해도 UI가 업데이트되지 않는다. 그래서 button을 눌러도 counter 변수 자체는 증가하지만 UI는 계속해서 0을 표시한다...

학습 키워드props, state, event handling, useState, useEffect 미션 저번 미션을 통해 만든 회원가입 폼을 학습 키워드 기반으로 다음과 같이 기능을 추가해야 한다.이메일, 비밀번호, 비밀번호체크, 이름, 나이를 useState로 작성하고, input 컴포넌트에서 이벤트를 통해 state를 변경useEffect를 사용해 비밀번호 재확인이 올바르지 않으면 올바르지 않다는 문구 추가 심화 미션필수 항목을 입력하지 않았을 때와 비밀번호 재확인이 올바르지 않을 때 가입하기 버튼이 클릭할 수 없도록 비활성화클릭했을 때 폼 내용이 모두 지워지는 초기화 버튼 만들기 결과물    코드먼저, 클래스 시간 때 멘토님이 몇가지 팁을 알려주셔서 그것에 대해 적용을 했다.멘토님은 파일 확장자를..

미션1 : CRA를 사용하지 않고 리액트 프로젝트를 만들어보세요.1. Node.js가 있는지 확인아래 명령어를 통해 Node.js가 있는지 확인한다.node -v 2. package.json 생성npm init -y-y는 yes라는 의미다.처음에 폴더명을 한글로 했더니 에러가 나서 영어로 고쳐줬다. 한글로 작성하면 안되나 보다.해당 명령어를 입력하면 기본적인 세팅이 되어있는 package.js 파일이 생성된다. 3. webpack 설치npm install --save-dev webpack npm install --save-dev webpack-cli npm install --save-dev webpack-dev-server위 명령어를 입력하면 package.json에 다음과 같은 코드가 생성된다.그리고 ..

학습 키워드현재 진행하고 있는 클래스는 학습 키워드를 미리 주고, 스터디 전까지 미리 학습해와서 관련 미션을 수행하는 식으로 진행된다. 이번 회차의 사전 키워드 다음과 같았다. 그리고 키워드에는 없지만 props를 알아야 이번 미션을 해결할 수 있다.CRA, 번들링, npm(npx), 함수형 컴포넌트, JSX  미션이번 미션은 주어진 요구사항에 맞춰 회원가입 폼을 만드는 것이다. 그 중에 가장 요점은 공통적인 input 부분을 컴포넌트로 분리해서 재사용하기였다. 결과물해결 과정처음부터 컴포넌트로 분리해서 작성하려니 막막했다. 그래서 먼저 하나의 완성된 코드로 작성하고나서 공통되는 부분을 컴포넌트로 분리했다.  1. 일단 완성된 폼 코드를 작성해보기완성된 폼 코드를 작성해보니 공통된 부분과, props로 ..

React JS 는 ui를 interactive(상호작용)하게 만들어준다. Before React Total clicks: 0 Click me React를 사용하지 않고 바닐라 JS로 코드를 짠 경우를 보자. (1)HTML을 만들고 (2)Javascript에 가져와 (3)event를 감지하고 (4)데이터를 업데이트한 뒤 (5)HTML을 업데이트한다. 계속 이런 방식으로 작업하면 복잡하고 비효율적이다. React Element 이번엔 React JS로 element를 생성하는 방식으로 해볼 것이다. 이를 사용하기 위해서는 react, react-dom를 import해야 한다. React JS는 HTML을 직접 작성하지 않고 JS 코드를 사용한다. const root = document.getElementB..