컴포넌트 문법
React에서 HTML을 컴포넌트화하여 App.js 파일에 작성하는 것은 매우 일반적인 방법입니다. 이렇게 하면 코드를 재사용하고 유지보수하기 쉽게 만들 수 있습니다.
컴포넌트는 반복적인 html을 작성 시 or 내용이 많이 담기는 페이지를 만들 때 or 자주 변경되는 페이지들을 컴포넌트 문법을 사용해서 만드는 게 좋습니다.
1단계 : function 만들어 줍니다. 2단계 : return( ) 안에 html태그를 작성 3단계 : <함수명></함수명>
import React from 'react';
function FirstComponent() {
return (
<div>
<h1>Hello, World!</h1>
<p>내 첫 컴포넌트야 ! </p>
</div>
);
}
export default FirstComponent;
**위의 코드에서 FirstComponent는 함수형 컴포넌트로, 간단한 헤더와 문단을 렌더링합니다.
다음으로, 이 컴포넌트를 App.js 파일에서 import하여 사용할 수 있습니다.**
import React from 'react';
import FirstComponent from './FirstComponent'; // FirstComponent 컴포넌트를 import합니다.
function App() {
return (
<div className="App">
<h1>나의 첫 리액트 앱에 방문해줘서 고마!</h1>
<FirstComponent /> {/* FirstComponent를 여기에서 사용합니다. */}
</div>
);
}
export default App;
위의 코드에서 MyComponent를 App 컴포넌트 내에서 사용하고 있습니다. 이렇게 하면 MyComponent 컴포넌트의 UI가 App 컴포넌트 안에 렌더링됩니다.
또한, 다른 컴포넌트들도 동일한 방식으로 만들어서 App.js 파일에서 사용할 수 있습니다. 이렇게 함으로써 큰 애플리케이션을 여러 작은 컴포넌트로 나누어 개발할 수 있습니다.
동적인 UI 만들어보기
동적인 UI는 대표적으로 툴팁 , 모달 페이지 등이 있습니다. React에서 동적인 UI를 만드는 방법은 주로 상태와 이벤트 처리를 활용하는 것에 있습니다.
기본적으로 먼저 html css로 미리 디자인을 완성한 후 UI의 현재 상태를 state로 저장하여 state에 따라 조건을 부여한 후 해당 조건이 변경됨에 따라 UI에 변화를 발생시켜 동적으로 기능하게 만들 수 있습니다.
1. state를 활용한 동적 UI 만들기
import React, { useState } from 'react';
function DynamicUI() {
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
};
return (
<div>
<h1>Count: {count}</h1>
<button onClick={handleIncrement}>Increment</button>
</div>
);
}
export default DynamicUI;
state는 컴포넌트의 동적인 데이터를 관리하는 데 사용됩니다. useState 훅을 사용하여 함수형 컴포넌트에서 상태를 선언할 수 있습니다.
2. 이벤트 처리를 활용한 동적 UI 만들기
import React, { useState } from 'react';
function DynamicInput() {
const [inputValue, setInputValue] = useState('');
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
return (
<div>
<input type="text" value={inputValue} onChange={handleInputChange} />
<p>You typed: {inputValue}</p>
</div>
);
}
export default DynamicInput;
React에서 이벤트 처리는 일반적인 JavaScript와 유사합니다. 이벤트 핸들러 함수를 정의하고 JSX에서 해당 함수를 이벤트에 연결합니다. 아의 예제에서 handleInputChange 함수는 input 요소의 onChange 이벤트에 연결되어 입력값을 상태에 업데이트합니다.
동적 UI를 만들 때 가장 흔하게 사용하는 삼항 연산자에 대해서 설명드리자면, React에서 삼항 연산자(ternary operator)는 조건부 렌더링을 할 때 매우 유용하게 사용됩니다. 삼항 연산자는 조건이 참이면 A를 반환하고, 그렇지 않으면 B를 반환하는 간단한 문법을 가지고 있습니다.
일반적으로 JSX에서 삼항 연산자를 사용하여 조건부로 요소를 렌더링합니다. 예를 들어, 로그인 유무에 따라 페이지의 상태 변화를 주기 위해 isLoggedIn이라는 상태가 있고 이 값에 따라 다른 환영 메시지를 렌더링하고 싶다고 가정해보겠습니다.
import React from 'react';
function Hello() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<div>
{isLoggedIn ? (
<h1>반가워 !</h1>
) : (
<h1>회원 가입을 부탁드립니다.</h1>
)}
</div>
);
}
export default Hello;
위의 코드에서 삼항 연산자를 사용하여 isLoggedIn 값이 true이면 "반가워 !"을, 그렇지 않으면 "회원 가입을 부탁드립니다."을 렌더링합니다. JSX 코드 내에서 삼항 연산자를 중괄호 **{}**로 둘러싸는 것에 주의해야 합니다.
삼항 연산자는 조건이 더 복잡한 경우에도 사용할 수 있습니다. 예를 들어, isLoggedIn이 true일 때와 isAdmin이 true일 때 각각 다른 메시지를 보여주고 싶다면 다음과 같이 할 수 있습니다
import React from 'react';
function Hello() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<div>
{isLoggedIn ? (
isAdmin ? (
<h1>관리자 계정으로 접속하셨습니다.</h1>
) : (
<h1>반가워 !</h1>
)
) : (
<h1>회원 가입을 부탁드립니다.</h1>
)}
</div>
);
}
export default Hello;
이렇게 함으로써 여러 조건에 따라 동적으로 UI를 렌더링할 수 있습니다. 삼항 연산자는 React 컴포넌트에서 조건부 렌더링을 위해 자주 사용되는 패턴 중 하나입니다. onClick 이벤트와 삼항연산자를 함께 사용하면 버튼처럼 isLogined의 상태가 true , false를 반복하게 됩니다.
💡 React에서의 Map( ) 함수
map 함수는 JavaScript 배열에서 사용되며 배열의 각 요소에 대해 주어진 함수를 호출하고 그 결과로 새로운 배열을 반환합니다.
이를 통해 각 요소를 변형하거나 가공하여 새로운 배열을 생성할 수 있습니다. React에서는 map 함수를 주로 배열의 요소를 기반으로 컴포넌트를 동적으로 생성하는 데 사용됩니다.
const newArray = Array.map((element, index, array) => {
return newArray.element;
});
****element: 배열의 현재 요소
index: 배열의 현재 요소의 인덱스
array: map 함수가 호출된 배열 자체
**[1,2,3].map(function() {
[1,2,3]은 array인데, 해당 array 자료 갯수만큼 함수 내부의 코드를 실행함
return '123456'
=> return 값을 해당 배열안에 담아줍니다.
})**
map 함수는 각 요소에 대해 주어진 콜백 함수를 호출하고 그 함수의 반환값들을 새로운 배열로 반환합니다.
예제 -
const numbers = [1, 2, 3, 4, 5];
const NumbersA = numbers.map((number) => {
return number * number;
});
**console.log(NumbersA); // 출력: [1, 4, 9, 16, 25]
위의 예제에서 map 함수는 numbers 배열의 각 요소를 제곱하여 새로운 배열 squaredNumbers를 생성합니다.**
React에서의 활용
React에서 map 함수는 주로 동적으로 컴포넌트를 생성할 때 사용됩니다. 예를 들어, 배열의 각 요소를 기반으로 리스트를 생성하는 경우:
import React from 'react';
function Component() {
const items = ["Item 1", "Item 2", "Item 3", "Item 4"];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
위의 예제에서 map 함수는 items 배열의 각 요소에 대해 <li> 요소를 생성하여 동적으로 리스트를 만듭니다. key 속성은 React가 각 항목을 구별하는 데 사용됩니다.
이러한 방식으로 map 함수를 사용하면 배열의 각 요소를 기반으로 동적인 UI를 쉽게 생성할 수 있습니다.
Map 예제들
const users = [
{ id : 1, name: "superman"},
{ id : 2, name : "pubao"},
{ id : 3, name : "kwonnnn"} ];
const userNames = users.map((user) => {
return user.name;
})
console.log(userNames);
**출력 결과 => (3) ['superman', 'pubao', 'kwonnnn']
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ**
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((number) => {
return number * number;
});
**console.log(squaredNumbers); // 출력: [1, 4, 9, 16, 25]
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ**
const numbers = [1, 2, 3, 4, 5, 6];
const oddEvenNumbers = numbers.map((number) => {
return number % 2 === 0 ? 'even' : 'odd';
});
**console.log(oddEvenNumbers); // 출력: ["odd", "even", "odd", "even", "odd", "even"]**
