React 3

[React] 리액트 훅(react hook)이란?

Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수.- useState : 컴포넌트 상태를 관리- useEffect : 컴포넌트 생명주기에 개입 *생명주기 기능: React 컴포넌트의 생성, 업데이트, 소멸 과정에서 발생하는 일련의 단계를 의미( 마운트, 업데이트, 언마운트 ) React Hooks는 이러한 생명주기 단계와 관련된 기능을 제공하여, 함수형 컴포넌트에서도 클래스형 컴포넌트와 같은 생명주기 관리가 가능하게 해 준다.컴포넌트 간의 계층을 바꾸지 않고 상태 로직을 재사용할 수 있다는 장점이 있다. - 컴포넌트 최상위에서만 호출할 수 있다.- Hook은 React 함수 내에서만 호출할 수 있다.( 함수형 컴포넌트나 custom hook에서만 호출 가능..

React 2024.09.27

[React] 리액트로 구구단 만들기

안녕하세요 ! 🙃🩶 오늘은 리액트를 통해 간단히 구구단을 만드는 코드를 짜 보겠습니다. 저번 포스팅에서 저희는 아직 클래스 컴포넌트밖에 배우지 않았기 때문에, 클래스 컴포넌트로 짜 볼 겁니다. 오늘 만들 구구단 프로그램의 대략적인 모습을 미리 스포해 보자면 이렇습니다 ! " X 곱하기 X 는 ? " 이라는 문장이 가장 먼저 나옵니다. 이 문장에서의 X 안에 들어가는 숫자는 정답을 맞출 때마다 랜덤으로 업데이트 되도록 만들 것입니다. 만약 오답을 입력했다면, 해당 문장은 변하지 않고 그대로 유지하도록 하겠습니다. (다시 풀어보라는 뜻이죠.) 자, 그럼 이 프로그램에서 변하는 형태의 state에는 어떤 것들이 있는지 살펴봅시다. 이 state들을 캐치해야 코드를 짤 수 있기 때문이에요. 1. 맨 첫 문장의 ..

React 2024.03.29

[React] 리액트 소개, 클래스 리액트 컴포넌트

안녕하세요 ! 💡 오늘을 기점으로 저는 매일 리액트를 포스팅 할 예정입니다! 시작에 앞서 잠시 🌟리액트를 소개하는 시간🌟 을 갖겠습니다 ! 🙃 웹 페이지는 크게 데이터, 그리고 UI(사용자 인터페이스)로 구성된다고 볼 수 있습니다. 리액트는 데이터 변경에 따라 UI를 효율적으로 렌더링하고 업데이트 해 주는 라이브러리입니다. 간단히 말하면 개발자는 컴포넌트 코드를 작성하고, 리액트가 이를 통해 DOM을 업데이트 하는 방식으로 이루어집니다. 🫂 리액트에서는 주로 JSX 문법을 사용합니다. * 컴포넌트 : 리액트의 기본 구성 요소. 데이터와 UI를 하나로 묶은 덩어리의 개념 * JSX : javascript 확장 문법. HTML/XML과 유사한 구문 사용 * DOM : 웹 브라우저가 웹 페이지를 렌더링하기 위..

React 2024.03.24