리액트컴포넌트 3

[react] 함수형 컴포넌트와 클래스형 컴포넌트의 차이

📌React 컴포넌트(Component)의 역할 리액트에서는 화면에서 보이는 인터페이스를 설계할 때 '컴포넌트' 단위로 설계가 이루어진다. 컴포넌트는 가장 기본적인 템플릿으로 데이터를 받아서 화면에 필요한 UI형태로 띄워주는 역할을 한다. 리액트에서는 이런 컴포넌트 단위로 앱을 구성하게 된다. 리액트에서는 컴포넌트는 선언 방식에 따라서 함수형 컴포넌트, 클래스형 컴포넌트로 나눠진다. 1️⃣함수형(Function) 컴포넌트 자바스크립트의 함수형태로 표현되는 컴포넌트이다. return 뒤에 JSX 코드를 넣어줘서 반환을 하게 된다. function about() { return ( Hello React ) } export default about; 자바스크립트에 익숙한 개발자라면 확실히 직관적이며, 메모리 ..

FrontEnd/React 2023.04.03

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

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

FrontEnd/React 2021.01.22

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

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

FrontEnd/React 2021.01.20