Jun's TID

리액트에서 컴포넌트를 스타일링할 때 다양한 방식을 사용할 수 있다. 여러 방식 중에서 딱히 정해진 방식이란 없지만, 보통 개발할 프로젝트의 특징이나 개발자의 취향으로 갈린다. 이번에 다뤄볼 리액트 스타일링 방식은 다음과 같다. 1. 일반 css: 컴포넌트를 스타일링하는 가장 기본적인 방식 2. Sass: 자주 사용되는 css 전처리기 중 하나로 확장된 css 문법을 사용하여 css 코드를 더욱 쉽게 작성할 수 있도록 해준다. 3. css Module: 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션이다. 4. styled-components: 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당..

Hooks는 리액트 v16.8에서 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 이전 포스팅에서 잠깐씩 그 개념을 다룬 적이 있는데, 이번에는 좀 더 본격적으로 Hooks를 다뤄보자. useState useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 함수 컴포넌트에서 상태를 관리해야 한다면, 이 Hook을 사용하면 된다. 간단한 예제를 하나 만들어보자. ◎Counter.js import {useState} from "react"; const Counter = () => {..

모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 컴포넌트의 수명의 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다. 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다. 이럴 때 컴포넌트의 라이프사이클 메서드를 사용한다. 마찬가지로 라이프사이클 메서드는 클래스형 컴포넌트에만 있는 기능이지만, Hooks 기능을 사용하여 비슷한 작업을 처리할 수는 있다. 바로 한번 알아보자. 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 아홉 가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 ..

웹 App을 만들다보면 태그와 같이 반복되는 코드를 작성할 때가 있다. 이번 포스팅에서는 리액트 프로젝트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법을 다뤄보자. 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. arr.map(callback, [thisArg]) - callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지이다. 1. currentValue: 현재 처리하고 있는 요소 2. index: 현재 처리하고 있는 요소의 index 값 3. array..

일반 HTML에서 DOM 요소에 이름을 달 떄는 보통 id를 사용한다. 특정 DOM 요소에 id를 달아서 CSS 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수가 있다. 기본 리액트 프로젝트도 처음 생성을 하면 div 요소에 root라는 아이디를 달아서 const root = ReactDOM.createRoot(document.getElementById('root')); 와 같이 사용한다. HTML 에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. 바로 ref(reference)이다. 리액트 컴포넌트 안에서도 id를 사용활 수 있지만, JSX 안에서 DOM에 id를 달면 해당 DOM을 렌더링할 때 그대로 전달된다...

리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤나 비슷하다. 리액트에서 이벤트를 사용할 때 주의할 사항들이 몇 가지가 존재하는데, 이는 다음과 같다. 1. 이벤트 이름은 Camel Case: 예를 들어 HTML의 onclick은 onClick으로 작성해야 한다. 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. 3. DOM 요소에만 이벤트를 설정할 수 있다. 직접 만든 컴포넌트에는 자체적으로 이벤트를 설정할 수 없다. 바로 한번 예제와 함께 알아보도록 하자. 우선, 예제로 사용할 컴포넌트를 생성하여 불러오자. ◎EventPractice.js import {Component} from 'react'; class E..

리액트에서 컴포넌트를 선언하는 방식은 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다. 첫 리액트 프로젝트에 있던 App.js 에는 function App()으로 시작하는 함수형 컴포넌트가 있었는데, 이를 클래스형 컴포넌트로 변경할 수도 있고, 새로운 컴포넌트를 추가할 수도 있다. 바로 한번 리액트의 컴포넌트 개념에 대하여 알아보자. 함수형, 클래스형 컴포넌트 ◎App.js import logo from './logo.svg'; import './App.css'; function App() { const name = 'React'; return ( {name} ); } export default App; 위와 같이 함수형 컴포넌트로 선언되어 있는 App() 컴포넌트를 클래스형으로 바꿔보면, import..

리액트에서 사용하는 자바스크립트 확장 문법인 JSX를 올바르게 사용하기 위해 준수해야 할 몇 가지 규칙과 문법을 알아보자. 1. 감싸인 요소 컴포턴트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 아래와 같이 작성할 수 없다는 이야기이다. import logo from './logo.svg'; import './App.css'; function App() { return ( 리액트 안녕 잘 작동하니? ); } export default App; 위 코드는 2개 이상의 컴포넌트를 감싸는 부모 요소가 없기 때문에 오류가 난다. 아래와 같이 div 태그로 감싸거나, import logo from './logo.svg'; import './App.css'; function App() { retur..

다시 프런트로 넘어와서, 이번에는 리액트를 본격적으로 공부하려고 한다. 말은 웹 개발자라고 하지만, 사실상 지금 다루고 있는 게 ExtJs 뿐이라... 점점 소위 말하는 "트렌드"와 멀어진다는 느낌이 들어 부랴부랴 시작해보려고 한다. 리액트로 개발을 입문하는 사람들도 적지 않다고 하니... 플러터도 있지만, 웹 개발 쪽에서는 확실히 node.js와 react.js 가 자리를 많이 차지하고 있는 거 같다. 책은 "리액트를 다루는 기술"을 참고하며, 기초부터 차근차근 모르고 넘어가는 부분 없이 확실하게! 해보자. 바로 시작해보자. - React? 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 다른 자바스크립트 "프레임워크"와는 달리 MVC 중 오직 View 부분만 신경을 쓰는 라..

우선, Spring 프로젝트에서 JPA를 사용하려면, 해당 프로젝트의 Project Facets에서 JPA를 다음과 같이 추가해야 한다. 위와 같이 추가를 해주면, src/main/resources/META-INF 폴더에 persistence.xml 설정 파일이 생성된다. 이후 pom.xml 에서 hibernate의 dependency를 추가한다. ◎pom.xml org.hibernate hibernate-entitymanager 5.1.0.Final org.springframework spring-orm ${org.springframework-version} 이제, JPA Entity 파일을 생성하자. ◎TodoEntity.java package com.choonham.tdl.dto; import ja..