Daehyunii's Dev-blog

리액트 라이프사이클? 리액트 컴포넌트의 수명 주기이다. 쉽게 말해, 컴포넌트가 생성되고 소멸되는 이련의 과정을 라이프 사이클이라고 한다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 함수 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업을 처리할 수는 있다. 일반적으로 리액트를 작성할 때 함수형 컴포넌트를 많이 사용하므로 '이런 것들이 있구나'하고 느끼고 함수 컴포넌트에서는 이를 어떻게 비슷하게 Hooks로 만들었는지 비교해보면 좋을 것 같다. 오늘은 class형 컴포넌트 라이프사이클 메서드들에 대해서만 다뤄보도록 하겠다. 우선 라이프사이클은 총 세 가지 기준으로 나눠볼 수 있다. 1. 마운트 DOM이 생성되고 웹 브라우저상에 나타날 때를 의미한다. 2. 업데이트 데이터가 변..

map( ) 함수의 활용 map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성해 반환한다. map( ) 함수의 문법은 다음과 같다. 첫 번째 인수는 콜백 함수를 받는다. 콜백 함수의 인자로는 (value, index, array) 세 가지를 받는다. -value: 현재 반복되고 있는 array요소 값 -index: 현재 반복되고 있는 array요소의 index값 -array: 현재 반복되고 있는 배열 그 자체 ex) array.map((value,index,array) => { }) 두 번째 인수는 callback 함수 내부에서 사용할 this 레퍼런스를 받는다. const numbers = [1, 2, 3, 4, 5]; cons..

//삼항 조건 연산자로 표현 const EmojiList = ({ emojis, keyword }) => { return ( {emojis.map((emoji) => { return keyword === "" ? ( ) : emoji.title.includes(keyword) || emoji.keywords.includes(keyword) ? ( ) : undefined; })} ); }; export default EmojiList; 데브코스 리액트 강의를 들으면서 실습을 하는 중에 검색을 통해 일치하는 데이터를 렌더링하는 기능을 만들게 되었고, 강의의 해당 부분을 듣기전에 스스로 먼저 만들어보면 좋겠다는 생각으로 코드를 먼저 구현해 보았다. 여태까지 조건문 대신 삼항 조건 연산자, 논리 곱(&&), ..

const EmojiListItem = ({ emoji }) => { return ( navigator.clipboard.writeText(emoji.symbol)}> {/* navigator.clipboard.writeText(emoji.symbol)}> 이게 간단하게 복사하는 방법임! */} {emoji.symbol} {emoji.title} {emoji.keywords} ); }; click이벤트 발생시, clipboard에 데이터를 저장

ref : DOM에 이름 달기 1. ref는 어떤 상황에서 사용해야 할까? ref를 사용해야 하는 상황은 한 문장으로 'DOM을 꼭 직접적으로 건드려야 할 때'이다. 바닐라 자바스크립트에서 DOM 요소를 조작하는것과 유사하다. 바닐라 자바스크립트에서는 DOM을 직접 건드리는 경우가 굉장히 많았지만, 리액트에서는 굳이 DOM에 접근하지 않아도 state로 구현할 수 있는 경우가 많다. 2. DOM을 꼭 사용해야 하는 상황은 언제일까? 특정 input에 포커스 주기 스크롤 박스 조작하기 canvas 요소에 그림 그리기 등 많은 상황이 있고 어쩔 수 없이 DOM에 직접적으로 접근해야 한다. 이런 상황에서 ref를 사용한다. 3. ref 사용하는 방법 ref를 사용하는 방법은 클래스형과 함수형에 따라 작성 방법..

리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷하다. 다만 주의해야 할 사항이 몇 가지 존재 한다. 이벤트 이름은 카멜 표기법으로 작성한다. 예를 들어 HTML의 onclick은 리액트에서는 onClick으로 작성해야 한다. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 객체 값을 전달해야 한다. DOM 요소에만 이벤트를 설정할 수 있다. 직접 만든 컴포넌트에 이벤트를 자체적으로 설정할 수 없기 때문에 onClick 이벤트를 전달하려고 한다면 그것은 그냥 이름이 onClick인 props를 전달해 줄 뿐이다. input 여러 개 다루기 setState를 여러 개 만들어 상태를 관리하는 방법도 있을 수 ..

함수형 컴포넌트와 클래스형 컴포넌트의 차이점 1. 클래스형 컴포넌트의 경우 state 기능, 라이프 사이클 기능의 사용 및 임의 메서드 정의가 가능하다. 2. 함수 컴포넌트의 경우 클래스형 컴포넌트에 비해 메모리 자원을 덜 사용한다.(유의미한 차이는 아니라고 함) 3. 함수 컴포넌트를 사용하는 것이 배포할 때 결과물의 파일 크기가 더 작다.(유의미한 차이는 아니라고 함) 4. 함수 컴포넌트의 경우에는 클래스형 컴포넌트에서의 라이프 사이클 기능 대신 Hooks를 통해 해결 가능하다. props 기본값 설정: defaultProps 부모 컴포넌트로 부터 prop을 전달 받지 않은 경우에 defaultProps를 설정할 수 있다. const MyComponent = (props) => { return 안녕하세..

JSX란? 자바스크립트의 확장 문법이며 XML과 매우 유사하다. 우선 JSX는 브라우저에서 실행되기 전 번들링되는 과정에서 바벨을 통해 일반 자바스크립트 형태의 코드로 변환된다. 다음 예제를 살펴보자. JSX function App() { return ( Hello react ) } 변환 function App() { return React.createElement("div", null, "Hello", React.createElement("b", null, "react")) } 이 처럼 JSX를 통해서 우리는 JavaScript로 작성해야 하는 코드들을 간략하고 시각적으로도 보기 좋게 표현할 수 있다. 한 마디로 JSX는 보기 쉽고 우리에게 익숙한 형태로 작성된다. 또한 JSX 문법을 활용하면 컴포넌트..