본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 8. input 상태 관리하기 이번에는 리액트에서 사용자가 입력 할 수 있는 input 태그의 상태를 관리하는 방법을 알아보자. 우선, src 디렉터리에 InputSample 컴포넌트를 생성 후 App 컴포넌트에서 렌더링해보자. InputSamp...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 지금까지는 리액트 컴포넌트를 만들 때 동적인 부분이 하나도 없었다. 즉 값이 바뀌는 일이 없었다. 이번에는 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 어떻게 구현...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 6. 조건부 렌더링 조건부 렌더링이란, 특정 조건에 따라 다른 결괌루을 렌더링하는 것을 의미한다. 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용 할 때, isSpecial 이라는 props 를 설정해보자. import React from...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 5. props를 통해 컴포넌트에게 값 전달하기 이번에는 컴포넌트의 props 라는 개념에 대해서 알아보자. props 는 properties 의 줄임말이다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용한다. props 의 기...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 4. JSX의 기본 규칙 알아보기 JSX 는 리액트에서 생김새를 정의할 때, 사용하는 문법이다. 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScript 이다. return <div>안녕하세요</div>; 리액트 컴포넌트 파...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 3. 나의 첫번째 리액트 컴포넌트 첫번째 리액트 컴포넌트를 만들어보자. src 디렉터리에 Hello.js 라는 파일을 다음과 같이 작성해보세요. Hello.js import React from 'react'; function Hello() ...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 2. 작업환경 준비 앞으로의 튜토리얼을 진행하기 위해 다음 항목들을 설치해주어야 한다. Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반으로 만들어져있다. 그렇기에 해당 도구들을 사용하기 위해서...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 01. 리액트는 어쩌다 만들어졌을까? 어떤 기술을 새로 익힐때 해당 기술의 본질(해당 기술이 생겨난 배경, 풀어내고자 하는 문제)를 이해하는 것이 가장 중요하다고 생각한다. 리액트는 왜 만들어졌을까? Javascript를 사용하여 HTML 로 구성한 U...

호이스팅이란? 모든 변수 선언은 호이스트된다. 호이스트 란 변수의 정의가 그 범위에 따라 선언(declaration)/초기화(initialization)/할당 분리되는 것을 의미한다. 쉽게 말하면 변수가 함수내에서 정의되었을 경우 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우는 전역 컨텍스트의 최상위로 변경됩니다. const hoisting...

출처 https://zgundam.tistory.com/199 https://github.com/TerryChang/p6spytest https://backtony.github.io/spring/2021-08-13-spring-log-1/