끄적이는 개발노트

이번 포스트에서는 조건부 렌더링에 대해 알아본다. React는 컴포넌트들의 구성으로 이루어졌다고 이전 포스트에서 다룬 적이 있다. 이 때, 어플리케이션의 상태에 따라서 컴포넌트를 렌더링할 수 있다. 아래와 같이 로그인 여부에 따라 화면 메세지가 달라지는 코드를 state만을 이용해 정말 간단하게 만들어본다. import React, { useState } from "react"; const UserSignIn = () => { return Welcome!; }; const UserSignOut = () => { return Please SignIn.; }; const App = () => { const [login, setLogin] = useState(false); return ( {login ? : ..

이번 포스트에서는 간단하게 이벤트 처리에 대해 알아본다. function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You clicked submit.'); } return ( // 기존 HTML이었다면 onSubmit="handleSubmit(e)" Submit ); } 이벤트를 선언할 때 중괄호에 함수를 넣어주기만 하면 된다. 다음 포스트에서는 조건부 렌더링에 대해 알아본다.

이번 포스트에서는 Hook에 대해 알아본다. React Hook은 기존에 클래스 컴포넌트에서만 사용할 수 있었던 state를 함수형 컴포넌트에서도 사용할 수 있도록 도입된 새로운 기능이다. 이를 통해 모든 컴포넌트가 함수형 컴포넌트로 대체 가능해진다. 또한, Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와주고, Hook을 통해 비슷한 기능을 묶어 컴포넌트로 나눌 수 있게 해준다. 그 중에서, 자주 사용되는 두가지 기능을 살펴본다. 1. useState React Hook에서는 state를 만들고 state의 변경을 적용시킬 함수를 만들기 위해 useState 함수를 사용한다. import React, { useState } from "react"; const App = () => ..

이번 포스트에서는 Component와 props의 사용법에 대해 알아본다. 1. Component 컴포넌트에는 함수 컴포넌트와 클래스 컴포넌트가 있다. 함수형 컴포넌트 state, lifeCycle 관련 기능 사용 불가능 (react-hook을 통해 해결됨) 메모리 자원을 덜 사용함 컴포넌트 선언이 편리함 import React from 'react'; import './App.css'; function App() { const name = 'react'; return {name} } export default App; 클래스형 컴포넌트 class 선언 필요 Component로 상속을 받음 render() 메소드가 반드시 필요 state, lifeCycle 관련 기능 사용 가능 임의의 메소드를 정의 가능..

이번 포스트에서는 React.js를 설치하는 방법을 알아본다. 1. Node.js 와 npm 설치 React.js는 npm으로 설치된다. 따라서, Node.js와 npm 설치가 필수다. 아래 링크를 참고하면 설치할 수 있다. https://hbc3869.tistory.com/6?category=923571 Node.js 환경구성 이번 포스트에서는 Lightsail에 생성한 우분투 인스턴스에 Node.js를 설치하고 테스트하는 방법을 알아본다. 아직 인스턴스를 구성하지 못했다면 아래 링크를 통해 인스턴스를 생성한 후 진행하도 hbc3869.tistory.com 2. Create React App $> npx create-react-app react-example create-react-app을 실행하면 아..

이번 포스트에서는 React.js의 기본 사용법을 알기 이전에 핵심 개념들에 대해 알아본다. React.js 는 페이스북이 만든 사용자 인터페이스를 구축하기 위한 선언적이고 효율적인 JavaScript 라이브러리이다. 주로, React.js를 사용한다하면 따라오는 개념이 싱글 페이지 어플리케이션(Single-page application, SPA)이다. SPA란? 기존의 웹사이트들은 페이지를 이동할 때마다 새로운 html을 받아오고 리소스를 전달받아 화면에 보여줬다. 하지만, 새로운 화면을 보여줄 때마다 서버 측에서 모든 뷰를 준비하고 보여준다면 성능상 문제가 발생할 수 있다. 이를 해결하기 위해 등장한 개념이 SPA로 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이다. 우선,..