개발해보개

React _ useRef 로 컴포넌트 안의 변수 만들기 이전 useRef에 관한 게시글에 있던 용도2에 대한 연습. useRef. 용도 1. React Hooks중 하나로 javascript의 getElementById querySelector와 같이 특정 DOM을 직접 선택하기 위해 사용하는 함수. (외부 라이브러리 사용시 유용) class형 컴포넌트에서는 콜백함수 혹은 React.createRef 사용. 용도 2. 컴포넌트 안에서 조회 및 수정 할 수 있는 변수 관리. useRef로 관리하는 변수는 값이 바뀐다고해서 컴포넌트가 리렌더링되지 않는다. 용도2 연습. useRef() 를 사용하여 nextId라는 변수 만들기.

React 2021. 10. 3. 22:48

React _ Map을 사용한 배열 렌더링 아래와 같이 코드 그대로 길게 작성하는 방법은 react의 컴포넌트 기능을 이용하지 못한 비효율적인 방법이다. 컴포넌트를 재사용 할 수 있도록 수정. 자바스크립트 배열의 내장함수 map() 을 사용하여 배열 렌더링. 위의 세가지 방법에 대한 결과는 아래와 같이 모두 같다.

React 2021. 10. 3. 22:43

React _ useRef 공부하기. (코드 내용은 useState와 이어짐.) useRef. 용도 1. React Hooks중 하나로 javascript의 getElementById querySelector와 같이 특정 DOM을 직접 선택하기 위해 사용하는 함수. (외부 라이브러리 사용시 유용) class형 컴포넌트에서는 콜백함수 혹은 React.createRef 사용. 용도 2. 컴포넌트 안에서 조회 및 수정 할 수 있는 변수 관리. useRef로 관리하는 변수는 값이 바뀐다고해서 컴포넌트가 리렌더링되지 않는다. 용도1 연습. 초기화 버튼 클릭시 초기화 버튼에 포커스가 남아있는데, 초기화 이후 input에 포커스가 잡히도록 구현. 코드

React 2021. 10. 3. 21:34

React _ useState 공부하기. useState React Hooks 중 하나. 함수형 컴포넌트에서 사용하는 상태관리 함수. 코드 결과 Input 상태관리 코드 결과 여러개의 input 상태관리하기 코드 결과

React 2021. 10. 3. 20:46

React _ State 공부하기. state란, 컴포넌트 내에서 동적으로 변경되는 값. React Hooks 가 나오기 전, class형 컴포넌트의 상태관리를 위해 this.state를 사용. *props와 state 비교 props는 함수 매개변수처럼 컴포넌트에 전달되는 반면, state는 함수 내 선언된 변수처럼 컴포넌트 안에서 관리가 된다. 공부내용. https://codesandbox.io/s/clever-waterfall-ulfmc?file=/src/App.js

React 2021. 10. 3. 15:27

React _ Props 공부하기. Props (Properties) : 어떠한 값을 다른 컴포넌트에게 전달해줘야 할 때 사용. 부모컴포넌트 -> 자식컴포넌트 (defaultProps. 컴포넌트에 props를 지정하지 않았을 경우, 기본적으로 사용할 값을 정할 수 있다. ) 공부내용. 1.벨로퍼트의 누구든지 하는 리액트 https://codesandbox.io/s/props-forked-ro67h?file=/src/MyName.js Props (forked) - CodeSandbox Props (forked) by hyonaLee using react, react-dom, react-scripts codesandbox.io 2.벨로퍼트와 함께하는 모던 리액트 App 컴포넌트에서 Hello 컴포넌트를 사용..

React 2021. 10. 3. 14:26

리액트란? '컴포넌트' 기반의 프론트엔드 라이브러리이다. (Component의 이름은 항상 대문자로 시작) JSX라는 문법을 사용한다. Virtual DOM사용 (가상돔) JSX문법이란? (자바스크립트 안에서 HTML문법을 사용하여 View를 구성 할 수 있게 도와주는 자바스크립트 문법) return시 하나의 DOM만 리턴함. (이때 의미없는 div의 남용을 보완하여 Fragment가 나옴.) If문 사용 불가. (삼항연산자로 대체하여 사용 가능) 가상돔이란? (브라우저에 실제로 보여지는 DOM이 아니라 그냥 메모리에 가상으로 존재하는 DOM으로서 그냥 JavaScript 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM 을 보여주는 것 보다 속도가 훨씬 빠릅니다. 리액트는 상태가 업데이트 되면, ..

React 2021. 10. 3. 14:22