이롭게 현명하게

목차 input 상태 관리하기 여러 개의 input 상태 관리하기 [input 상태관리하기] 코드를 실행하면 다음과 같은 화면이 나온다. useState와 onChange 이벤트를 사용해 값을 입력하면 하단에 나타나도록 했다. // InputSample.js // import React from "react"; function InputSample(){ return( 초기화 값 어쩌고 저쩌고 ); } export default InputSample; // App.js // import React from "react"; import InputSample from "./InputSample.js"; function App() { return ( ); } export default App; 리액트에서는 in..

목차 useState란? import 예시 코드 더보기 다음은 자바스크립트로 작성한 Counter이다. 자바스크립트에서 어떠한 태그에 접근하고 싶을 때 DOM API를 사용하여 접근한다. 태그에 있는 id 속성을 사용해 getElementById로 해당 태그에 접근하여 사용한다. 해당하는 id에 접근하여 onclick 이벤트 핸들러를 통해 값을 변경한다. 0 +1 -1 // main.js // const number = document.getElementById('number'); const increase = document.getElementById('increase'); const decrease = document.getElementById('decrease'); increase.onclick =..

목차 조건부 렌더링 삼항 연산자를 사용한 조건부 렌더링 && 연산자를 사용한 조건부 렌더링 props값 설정 생략 [조건부 렌더링] 조건부 렌더링 : 특정 조건에 따라 다른 결과물을 렌더링 하는 것 기본적으로 삼항 연산자를 사용한다. 삼항 연산자사용 &&연산자 사용 props 값 설정 생략 [삼항 연산자를 사용한 조건부 렌더링] 여기서 true는 자바스크립트 값이기 때문에 중괄호로 감싸주었다. Tutorial 컴포넌트에서는 isSpecial이 true 이냐 false이냐에 따라서 다른 결과물을 보여준다. 이것을 처리하는 가장 기본적인 방법은 삼항 연산자를 사용하는 것이다. 만약 isSpecial이 true 라면 'true입니다.'라는 문구가 브라우저 화면에 나타난다. // Tutorial.js // im..

목차 JSX란? JSX 역할 JSX사용 시 장점 JSX 사용 규칙 JSX 안에 자바스크립트 값 사용하기 style과 className을 설정하는 방법 JSX에서의 주석 JSX [JSX란?] JSX(Syntax Extension to Javascript) : 리액트에서 생김새를 정의할 때 사용하는 문법이다. JSX는 리액트를 사용하여 개발할 때 거의 필수적으로 사용해야 한다. 자바스크립트의 확장 문법이라는 의미를 가지고 있다. 자바스크립트와 XML.HTML을 합친 것이라고 생각하면 이해하기 쉽다. 얼핏 보면 HTML 같지만 실제로는 자바스크립트다. const element = Hello, World! 위 코드는 대입 연산자 equal이 나온다. 대입 연산자는 오른쪽에 있는 값을 왼쪽에 있는 변수에 대입해 ..

목차 Component란?Component 만들기Component의 이름  [Component란?]리액트는 Component 기반의 구조라는 특징을 가지고 있다.리액트는 모든 페이지가 Component로 구성되어 있고 하나의 Component는 또 다른 여러 개의 Component의 조합으로 구성될 수 있다.이러한 Component들을 마치 레고 블록을 조립하듯 끼워 맞춰 새로운 Component를 만들 수 있다. Component : 입력(props)을 받아 출력(Element) 하는 역할 코드 양을 줄일 수 있다.개발 시간을 줄일 수 있다.유지 보수 비용이 줄어든다. 더보기Component를 사용해야 하는 이유 에어비앤비 홈페이지다.  에어비앤비의 Component는 다음과 같다.파란색 Compone..

목차 작업환경 준비하기 Node.js 설치하기 yarn 설치하기 vscode 설치하기 git for windows 설치하기 리트 환경설정 [작업 환경 준비하기] 리액트 개발을 시작할 수 있도록 작업 환경을 준비해야 한다. 설치하기 위해서는 총 3가지를 설치해야 한다. Node.js : 브라우저 환경이 아닌 곳에서도 자바스크립트를 실행할 수 있게 해주는 자바스크립트 런타임 리액트 프로젝트를 진행하면서 사용하는 도구들로 Webpack, Babel 같은 도구들이 자바스크립트 런타임 node.js를 기반으로 만들어져 있기 때문에 node.js를 설치해야 한다. yarn : 조금 개선된 버전의 npm으로 생각하면 이해하기 쉽다. 자바스크립트 패키지 매니저 도구로 node.js를 설치하면 npm이라는 도구가 같이 ..