1. 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있다. 2. 문법 arr.map(callback, [thisArg]) 함수의 파라미터 callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지이다. currentValue : 현재 처리하고 있는 요소 inext : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스 3. 예제 let numbers = [1, 2, 3, 4]; let processd = numbers.map(function(num){ return num * num;..

1. ref는 어떤 상황에서 사용해야 할까? 특정 DOM에 작업을 해야 할때 ref를 사용해야함 여기서 특정 작업이란 DOM을 꼭 직접적으로 건드려야 할때를 말함 예를 들어 일반 순수 JS 및 jQuery로 만든 웹사이트에서 input을 검증할때는 특정id를 가진 input에 클래스를 설정함 2. 예제 컴포넌트 생성 class ValidationSample extends Component { state = { password: "", clicked: false, validated: false, }; handleChange = (e) => { this.setState({ password: e.target.value, }); }; handleButtonClick = () => { this.setState({..

1. 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷함 2. 이벤트를 사용할 때 주의 사항 1. 이벤트 이름은 카멜 표기법으로 작성 HTML: onclick -> React: onClick 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. 화살표 함수 문법으로 함수를 만들어 전달 렌더링 부분 외부에 미리 만들어 전달 3. DOM 요소에만 이벤트를 설정할 수 있음 DOM 요소에는 이벤트를 설정할수 있지만 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음 3. 이벤트 종류 몇가지만 정리 해봤다. 나머지 이벤트는 리액트 매뉴얼 (http://facebook.github.io/react/doc..

1. 컴포넌트 종류 컴포넌트를 선언하는 방식은 두가지이다. 1. 함수 컴포넌트 2. 클래스형 컴포넌트 이렇게 두가지가 있다. 하지만 최근 클래스형 컴포넌트보단 함수 컴포넌트를 주로 사용한다. 다양한 이유가 있겠지만, 주요 이유는 1. 간단한 작성으로 가독성이 좋다. 2. 성능적인 부분에서 함수가 좀 더 효율적으로 사용할 수 있다. 3. 테스트 용이성 2. 컴포넌트 생성 생성 순서는 1. 파일 만들기 -> 2. 코드 작성하기 -> 3. 모듈 내보내기 및 불러오기 컴포넌트를 만들고자 할 때는 컴포넌트 코드를 선언해야 한다. const My Component = () => { return 함수형 컴포넌트 ; }; export default MyComponent; 3. 화살표 함수 function BlackDo..

React context 1. react context의 필요성 우리는 일반적으로 부모컴포넌트 -> 자식컴포넌트로 데이터를 전달해준다. 이를 props를 사용했다. 그러나 부모->자식-> 그의 자식-> 그의 자식의 자식 / 이렇게 너무 깊어지면 prop drilling 현상이 일어난다. prop drilling의 문제점은 1. 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로 왔는지 파악이 어렵다. 2. 어떤 컴포넌트에서 오류가 발생할 경우 오류 파악이 어렵다. 출처 : https://www.copycat.dev/blog/react-context/ Your Guide To The React Context API - CopyCat Blog This article explains the drawbacks ..

useRef란? useRef는 React Hooks의 하나로, DOM 노드나 다른 React 컴포넌트와 관련된 값을 기억하고 업데이트 할 수 있는 객체를 생성한다. import "./App.css"; import { useRef } from "react"; function App() { const ref = useRef("초기값"); console.log("ref", ref); return ( useRef에 대한 이야기에요. ); } export default App; 콘솔을 확인해보면, ref이 값은 이렇게 출력된다. 이 뿐만 아니라 변경이 가능하다. import "./App.css"; import { useRef } from "react"; function App() { const ref = useR..