맹정의 행복코딩랜드

무한 스크롤 이란? 무한 스크롤은 무한히 스크롤링을 기능하는 기능을 말한다. 페이지를 클릭하면 다음 페이지 주소로 이동하는 pagenation과 달리 페이지 하단에 도달하면 새로운 컨텐츠가 한 화면에 추가로 로드된다. 무한 스크롤의 장점 1. 사용자 참여 및 콘텐츠 탐색이 쉽습니다. 2. 무한 스크롤이 클릭하는 것보다 더 나은 사용자 경험을 제공합니다. => 따라서 다음 콘텐츠를 보기 위한 추가 클릭이 필요없고 페이지 로드 시간이 짧습니다. 3. 터치 스크린(모바일) 일때 더 유용하게 적용됩니다. => 화면이 작을수록 스크롤이 길어지기에 모바일 환경에서 콘텐츠를 보여주기 직관적이고 사용하기 쉽습니다. 무한 스크롤의 단점 1. 페이지 성능이 느려집니다. 2. 특정 항목 검색 및 원래 위치로 돌아오기 힘듭니..

#Hooks 란? Hooks는 리액트에서 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직 후 작업을 설정하는 useEffect 등의 기능을 제공하며 기존의 함수 컴포넌트에서 할 수 없었던 작업을 할 수 있게 해줍니다. 1. useState useState는 가장 기본적인 Hooks 이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있도록 해줍니다. 만약 함수 컴포넌트에서 상태를 관리해야한다면 이 Hook을 사용하면 됩니다. import {useState} from 'react'; const Counter = () => { const [value,setvalue] = useState(0); return ( 현재 카운트 값은 {value} 입니다. setVal..

# 라이프 사이클? 모든 리액트 컴포넌트에는 리액트 사이클이 존재합니다. 컴포넌트의 수명은 페이지 렌더링 되기전에 페이지가 사라질때 끝이 납니다. 오늘은 라이프 사이클 메서드의 대해서 알아보겠습니다. # 라이프 사이클 메서드의 이해 1. 라이프 사이클 메서드의 종류는 총 아홉가지로 Will 접두사가 붙은 메서드 = 어떤 작업을 작동 하기 전 실행되는 메서드 Did 접두사가 붙은 메서드 = 어떤 작업을 작동 한 후에 실행되는 메서드 2. 리액트사이클은 총 세가지로 마운트, 업데이트, 언마운트로 나뉩니다. 하나씩 알아보도록 하겠습니다. # 라이프 사이클의 마운트 DOM이 생성되고 웹 브라우저 상에 나타나는 것을 마운트 라고 합니다. - constructor : 컴포넌트를 새로 만들때마다 호출하는 클래스 생성..

# 어떻게 하면 효율적으로 보여주고 관리가 가능할까? 자바스크립트에는 배열 객체 내장 함수인 map() 함수를 사용하여, 반복되는 컴포넌트를 렌더링 할 수 있습니다. map 함수는 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환 뒤 그 결과로 새로운 배열을 생성합니다. map() 함수의 문법 - arr.map(callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 세가지 입니다. currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg[선택] : callback 함수 내부에서 사용할 this 레퍼런스 # 데이터 배열을..

# ref? HTML 에서 id 를 사용하여 DOM 에 이름을 다는것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는방법이 있다. 이것이 바로 ref(reference 줄임말) 개념이다. 리액트 컴포넌트 안에서는 id를 사용하면 안되나요? 👉 리액트 컴포넌트 안에서도 id 사용할수 있습니다. JSX 안에서 DOM에 id를 달면 해당 DOM을 렌더링할 때 그대로 전달합니다. 하지만 특수한 경우가 아니면 권장하지는 않습니다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 문제는 생기지 않습니다. # 그럼 ref는 어떤 상황에서 사용해야 할까? 정답은 'DOM을 꼭 직접적으로 건드려야 할 때' 입니다. 예를 들어, 일반 순수 자바스크립트로 및 jQuery로 만든 웹 사이트에서 inpu..

# 이벤트 핸들링? DOM 요소들과 상호 작용하는것을 이벤트 라고 한다. 예를 들어, 버튼에 마우스 커서를 올렸을때 onmouseover 이벤트를 실행하고 클릭했을때는 onclick 이벤트를 실행한다. # 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저 HTML 이벤트와 인터페이스가 동일하다. import {useState} from 'react'; const Say = () => { const [message, setMessage] = useState(''); const onClickEnter = () => setMessage('안녕하세요!'); const onClickLeave = () => setMessage('안녕히가세요!)'; const [color,setColor] = useSta..

안녕하세요. 맹정입니다! 오늘은 컴포넌트에 대해서 알아볼 예정입니다. # 함수 컴포넌트와 클래스형 컴포넌트 다음 코드는 함수 컴포넌트 입니다. import './App.css'; function App(){ const name = '리액트'; return {name}; } export default App; 다음 코드는 클래스형 컴포넌트입니다. import { Component } from 'react'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 클래스형 컴포넌트와 함수 컴포넌트의 차이점 1. 클래스형 컴포넌트의 경우, 이후 배울 state 기능 및 라이프 사이클 ..

안녕하세요. 맹정입니다! 오늘은 JSX에 대해 알아봅시다. # import 문 import logo from "./logo.svg"; import "./App.css"; import 문은 특정 파일을 불러오는것을 의미합니다. 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import 문을 사용하여 다른 파일들을 불러와 사용할 수 있습니다. 잠깐! 모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능입니다. 자바스크립트를 실행 할수 있게 해주는 환경인 Node.js 에서 지원하는 기능입니다. 참고로 , Node.js 는 import 가 아닌 require 라는 구문으로 패키지를 불러올 수 있습니다. 이러한 기능들을 브라우저에서 사용하기 위해 번들러(bundler) 를 사용합니다. 대표적인 번들러로는..