useState는 React의 hooks 중 하나로 해당 예시는 UseSate를 활용하여 간단한 Counter 프로그램 만들기다. 먼저 Counter.js 파일을 생성 후 아래와 같이 소스를 작성한다. import React, {useState} from 'react'; // useState 함수 사용 function Counter() { const [number, setNumber] = useState(0); // COunter 컴포넌트 내부에 함수 작성 const onIncrease = () => { // 숫자 증가 setNumber(number + 1); } const onDecrease = () => { // 숫자 감소 setNumber(number - 1); } return ( {number} ..

조건부 렌더링(rendering)이란? 특정 조건이 참인지 거짓인지에 따라 다른 결과를 보여주는 것 먼저 App.js의 Hello 태그 안에 isSpecial을 작성한다. import React from 'react'; import Hello from './Hello'; // 현재 자신의 디렉토리에 있는 Hello 컴포넌트를 불러옴 import Wrapper from './Wrapper'; function App() { return ( {/* true 또한 Javascript 값이기 때문에 중괄호로 감싸야 한다 */} ); } export default App; Hello.js 컴포넌트로 이동하여 아래 소스를 작성한다. 해당 소스는 삼항연산자를 활용하여 isSpecial 값의 true/false 에 따라..

props는 properties의 줄임말이다. props는 컴포넌트를 사용하려 할 때 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용한다. App.js import React from 'react'; import Hello from './Hello'; // 현재 자신의 디렉토리에 있는 Hello 컴포넌트를 불러옴 function App() { return ( ); } export default App; 위와 같이 작성 후 Hello.js로 이동 import React from 'react'; // 리액트를 불러와서 사용하겠다. // 함수 형태 컴포넌트 // 함수형태 컴포넌트의 첫 자리는 대문자 권장 // props 파라미터 안에는 App.js에서 넣어준 값이 객체 형태로 존재 function Hello(..

JSX란 React에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다. 보기에는 HTML처럼 생겼지만 실제로는 Javascript다. 바벨이라는 도구를 사용하여 XML 형태의 코드가 Javascript로 변환이 된다. 변환되는 것을 확인하기 위하여 babeljs.io에 접속하여 아래 코드를 입력해 본다. 위 이미지의 네모 안의 createElement 함수가 컴포넌트를 만들어준다. 즉 컴포넌트를 우측 방식대로 계속 선언하는 것은 어려움이 있으니 JSX를 문법을 사용하여 XML형태로 사용하면 이것을 Javscript 형태로 변환하게끔 해주는 것이 바벨이라는 도구다. JSX 문법을 정확하게 Javascript 문법으로 변환하기 위해서는 지켜야 할 규칙들이 있다. 태그는 무조건 닫혀야 된다. (닫히는 태그가..

리액트 컴포넌트를 만들어 보자. 먼저 src 디렉터리에 Hello.js라는 파일을 만들고 아래와 같이 작성한다. import React from 'react'; function Hello() { return 안녕하세요 } export default Hello; 리액트 컴포넌트를 만들 땐 우선 상단에서 다음과 같은 코드를 입력해야 한다. import React from 'react'; 이 코드는 리액트를 불러와서 사용하겠다는 것을 의미한다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데, 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다. 그리고 이렇게 import 구문을 통해 리액트를 불러와서 사용할 수 있는 것이다. ∴ 사실 이렇게 모..

리액트라는 라이브러리가 어쩌다 만들어졌는지 아는 것은 리액트를 이해하는 데 도움이 될 것이다. JavaScript를 사용해서 HTML로 구성된 UI를 제어해 봤다면 DOM(Document Object Model) - 각 HTML element에 대한 정보를 지니고 있는 JavaScript 객체 -을 변형시키기 위해 우리가 어떤 작업을 해야 하는지 익숙할 것이다. DOM을 변형하려면 브라우저의 DOM Selector API를 사용해서 특정 DOM을 선택한 뒤 특정 이벤트가 발생하면 변화를 주도록 설정해야 한다. 0 +1 -1 const number = document.getElementById("number"); const increase = document.getElementById("increase")..