ref prop React의 ref prop은 HTML 엘리먼트의 래퍼런스를 변수에 저장하기 위해 사용한다. 엘리먼트에 ref prop으로 inputRef라는 변수를 넘기면 이 inputRef 객체의 current 속성을 통해 엘리먼트에 접근할 수 있고 DOM API를 이용하여 제어 할 수 있게된다. useRef ref prop에는 React API 중 current 속성을 갖는 특정 형태의 객체만이 할당 될 수 있다 클래스 기반 컴포넌트에서는 React.createRef() 함수를 사용하고 함수형 컴포넌트에서는 useRef()와 같은 훅(Hook)함수를 사용하여 객체를 생성할 수 있다. 예제. input 엘리먼트 제어 useRef Hook 함수를 이용하여 inputRef 객체를 생성한 후 엘리먼트의 r..

함수 컴포넌트 함수형 컴포넌트는 JSX리턴하는 함수를 정의한다. 컴포넌트 자체에 State(데이터)가 없거나 외부에서 전달받은 데이터(Props)를 보여주거나 State, Props 둘다 없는 정적인 컴포넌트를 만들때 함수형 컴포넌트를 사용한다. 클래스 컴포넌트와 반대로 함수를 호출할때마다 함수 코드블럭 전체가 재실행되고 그 안에서 선언된 로컬변수, 값들이 다시 정의,할당 되어진다. 따라서 일반 함수형 컴포넌트에서는 자체적인 State를 가질수 없다. 정리: 함수형 컴포넌트는 자체적인 데이터가 필요없고 라이프 사이클 메소드를 사용하지 않는 정적인 컴포넌트를 만들때 사용한다 클래스 컴포넌트 리액트에서 제공하는 React.Component 클래스를 상속하는 클래스를 만들고 UI를 어떻게 표기할 것인지 정의하..

State state는 컴포넌트 안에서 내부적으로 데이터를 정의하는 오브젝트이다 컴포넌트 UI를 위한 데이터를 보관하는 오브젝트이며 state 업데이트를 통해 데이터가 변경되면 리액트가 자동적으로 render함수를 호출한다. Props props는 컴포넌트 밖에서 주어지는 데이터라고 한다 컴포넌트 안에서 데이터를 직접 정의하는 state와 달리 props는 외부에서 데이터를 제공받는다 props를 쓰는 근본적인 이유는 재사용률을 높이기 위함이며 상황에 따라 주어진 데이터를 그 데이터에 맞게 UI에 표기해준다. 위와 같이 부모 컴포넌트에서 LikeButton 컴포넌트를 사용할 때 title 과 onClick이라는 아이들을 인자로 전달해주면 전달 받은 인자들은 props 오브젝트로 묶여서 LikeButton..

컴포넌트 생성 방법 리액트에서 컴포넌트란 화면상에 보여지는 UI 단위라고 한다. 그렇다면 컴포넌트는 어떻게 생성할 수 있을까? 리액트에서 컴포넌트를 만들기 위한 방법으로는 아래와 같이 두가지 방법이 있다. 클래스 컴포넌트 함수 컴포넌트 클래스 컴포넌트와 함수 컴포넌트의 역할은 동일하다. 다만 아래와 같이 차이점이 존재한다. 클래스 컴포넌트(class component) 클래스 컴포넌트는 State와 라이프사이클(Life Cycle)메소드를 사용할 수 있다. 또 리액트에서 제공하는 컴포넌트를 상속해야하고 render함수가 있어야한다. 함수 컴포넌트(function component) 함수 컴포넌트는 State와 라이프사이클 메소드를 사용할 수 없다. 또 return에 JSX를 사용하여 리턴해줘야 한다. 클..

Node.js node.js는 어느 곳에서든 자바스크립트로 프로그래밍을 가능하게 해주는 런타임 환경이다. 예전에는 자바스크립트를 브라우저 위에서만 실행할 수 있었다. 하지만 지금은 node.js가 있는 환경이라면 브라우저 밖 또는 운영체제 위에서도 자바스크립트 코드를 작성하고 실행할 수 있다. 따라서 요즘은 백엔드서버를 만들거나 서버 사이드 렌더링을할 때 또는 커맨드라인툴이나 스크립트를 작성할 때 node.js를 사용한다. npm 나중에 외부 라이브러리를 필요로할 때 외부 라이브러리를 직접 찾아서 다운받고 사용할 프로젝트 안에 넣고 import하고 굉장히 번거로울 수 있다. 그래서 이런 외부 라이브러리를 쉽게 관리할 수 있게 도와주는 것이 있는데 그것이 바로 npm이다. npm을 사용하면 아주 간단한 명..

🤔 React란? React란 사용자 인터페이스를 구축하기위한 작고 고립된 컴포넌트로 이루어진 효율적이고 유연한 자바스크립트 라이브러리라고 하는데 여기서 컴포넌트(Component)는 하나의 작업을 수행하기 위한 작은 단위라고 한다. React는 디자인 패턴 중 MVC패턴에서 사용자에게 보여지는 부분인 view를 담당한다. React 대중성 여기서 React의 실사용률을 가늠해보자면 Angular 그리고 Vue와 비교해봤을 때 다운로드 수가 4.5배나 높다. 이는 React가 대중적이고 가장 많이 사용되고 있단 걸 확인 할 수 있다. 이렇게 많이 사용되고 있다는 것은 그만큼 관련된 문서가 많고, 커뮤니티에 대중적이라는 것이다. React를 선택하는 이유 독립적이다. 재사용성이 높다. 성능이 좋다(효율적)..