react 6

[React] 함수형 컴포넌트 상태관리 Hooks useState 사용법 알아보기

🍟React Hooks이란? Hooks은 리액트 16.8 버전에서 새로 도입된 상태 관리 기능이다. 기존의 함수형코드에서는 관리하지 못했던 상태 관리가 Hooks을 통해서 가능해졌다. React Native의 경우에는 0.59 버전부터 Hook을 지원한다고 한다. React에서는 함수형 컴포넌트와 Class형 컴포넌트 두 가지 형태로 코드를 작성하는데, 기존의 함수형 컴포넌트에서는 React State의 생명주기 기능을 이용할 수 없었다. 하지만 hooks 기능이 추가되면서 이제는 함수형 컴포넌트에서도 생명주기 기능을 연동할 수 있게 된다. Hooks은 클래스형 컴포넌트에서는 동작하지 않는다. hooks 업데이트 이후에도 클래스형 컴포넌트는 그대로 사용이 가능 때문에, Hooks의 기능을 위해서 기존 코..

FrontEnd 2021.10.20

[react 간단 예시] input box에 focus 후 초기화 하는 방법 (리액트 ref 이용하기)

react Ref 이용하기 react에서 직접 DOM에 접근해서 작동시켜야하는 때가 있다. 오늘 가져온 경우는 input에 focus를 줘보는 예시를 만들어보았다. react의 ref를 사용하면 컴포넌트 내부에 있는 DOM에 직접 접근을 할 수 있다. 예시 코드 가장 기본적인 App 컴포넌트를 하나 만들어주었다. 이름을 입력받을 input과 버튼을 클릭하면 input 내용을 초기화한 뒤 포커스를 해주는 버튼을 만들어 보도록 하겠다. import {Component} from "react"; class App extends Component { constructor(props) { super(props); this.state = { name:'이름' } } inputFocus = () =>{ this.se..

FrontEnd 2021.09.15 (2)

[React] React 자습하기 - 이벤트 사용하기 (간단한 기본 예시)

React Event 사용하기 HTML을 이용한 홈페이지를 만들었을 경우, 우리는 해당 홈페이지에서 동적인 역할을 만들기 위해 JavaScript를 이용하여 동적인 이벤트를 만들어낸다. 가장 간단한 alert창을 HTML과 Javascript 문법으로 띄운다고 가정했을 경우 아래와 같이 입력할 것이다. Click Me! React Event 기본 문법 이와 같은 동작을 React에서 발생시키려면 아래와 같은 문법으로 작성한다. 이벤트 발생 문은 소문자가 아닌 camelCase(카멜 케이스)로 입력한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트를 전달한다. 기본 이벤트가 있는 태그 동작을 방지하려면, preventDefault를 명시적으로 호출한다. (return false) preventDefaul..

FrontEnd 2021.02.11

[React] React 자습하기 - JSX 개념과 쉬운 예제 살펴보기

🐣 들어가기 전 해당 React Study는 아래 글에서 세팅한 프로젝트에서 진행 중입니다. 기본적인 Setting 내용을 보려면 아래글을 먼저 참고해주세요. ordinary-code.tistory.com/33 [React]React 자습하기 - 1. 프런트앤드흐름과 React의 기본 개념 🐣 FrontEnd 개발 언어의 흐름 jQuery의 부흥 2014년 처음 개발자가 되겠다고 마음을 먹었을 때, 처음 접하게 된 라이브러리는 jQuery였다. 웹에서 작동하는 JavaScript 개념이 전혀 없어도 jQuery와 함께라 ordinary-code.tistory.com 오늘은 이제까지 미뤄두고 사용했던 JSX에 대해 좀 더 공부해보기로 했다. 기본적으로 JavaScript에서의 변수로 넣을 수 있는 값은 S..

FrontEnd 2021.01.31 (1)

[React]React 자습하기 - 2. 함수컴포넌트에서 props 이용하기

저번에 React 컴포넌트에서 공부를 했다. 우리는 앞으로 React에서 컴포넌트를 만들어서 재사용을 할 예정이다. 이때 컴포넌트 호출 시 각각 필요한 데이터를 전달할 일이 생길 것인데 이때 이용하는 게 바로 props이다. 오늘은 React에 props라는 개념을 이용해서 React 컴포넌트에 데이터를 전달해 보기로 하겠다. 컴포넌트를 만드는 두 가지 방법 React에서 컴포넌트는 두 가지 방법으로 만들 수 있다. JavaScript의 function모양과 비슷하게 작성하는 함수 컴포넌트와 Class를 만들 듯이 작성하는 클래스 컴포넌트가 있다. 저번 스터디에서는 클래스 컴포넌트 형태로 Hello, world를 화면에 출력시켜보았다. 지난 시간에 만든 클래스 컴포넌트와 동일한 역할을 수행하는 함수형 컴..

FrontEnd 2021.01.22 (3)

[React]React 자습하기 - 1. 프런트앤드흐름과 React의 기본 개념

🐣 FrontEnd 개발 언어의 흐름 jQuery의 부흥 2014년 처음 개발자가 되겠다고 마음을 먹었을 때, 처음 접하게 된 라이브러리는 jQuery였다. 웹에서 작동하는 JavaScript 개념이 전혀 없어도 jQuery와 함께라면 웹 화면을 만들 수 있었다. 처음 웹 개발을 시작한 주니어들에게 이해하기 쉬운 언어 규칙, 직관적인 방식으로 웹에 애니메이션 효과 혹은 css효과를 줄 수 있는 매우 유용한 라이브러리였다. jQuery의 부흥과 더불어 트위터에서 jQuery를 이용한 프런트 앤드 프레임워크인 Bootstrap이 등장하게 되면서, javascript를 전혀 모르던 나도 부트스트랩과 jQuery를 이용하여 그럴듯한 웹페이지를 만들 수 있었다. 프레임워크 3 대장 등장 업계에 들어오고 2년 동안..

FrontEnd 2021.01.20