리액트로 웹페이지 아이콘 넣기

Question

안녕하세요 노베이스 웹개발 공부 중인 코린이입니다.다음 두 가지에 대해 질문드리고 싶습니다.화면 비율에 맞게 아이콘 넣는 방법-아이콘을 html 파일에 추가하면 웹페이지 아래에서부터 추가돼서 화면이 길어짐. -> 화면 크기 고정 어떻게? (비율: 1920*1080)-기존에 위치 지정한 아이콘 코드 아래에 다른 아이콘에 대한 코드를 추가하면 화면에도 그 아래에 표시되는 것 같은데 이 개념 이름을 알고싶음.리액트로 프론트 화면을 만든다는 것도 html, css 파일 만지는 게 맞죠?급하게 프로젝트를 해야해서 기본적인 부분에 대한 질문 드린 점 양해 부탁드립니다.

킁킁탐정 · Answer

첫 번째, 어떤 위치에 아이콘이 추가되고 화면이 어떻게 길어지는지 확인이 불가능하기 때문에 답변이 어렵습니다.두 번째, react로 프론트엔드를 한다는 것은 HTML,CSS 그리고 JS를 하는것과 같습니다.세 번째, 질문은 제3자가 상황과 문제점을 파악할 수 있게 최대한 자세하게, 필요하다면 그림이나 연관된 코드를 첨부해야합니다.네 번째, 질문을 읽는 사람을 배려해서 한번 더 작성한 글을 읽고 문장이나 오타를 교정하는게 좋습니다.

옥다방고양이 · Answer

(1)먼저 React 코드는 아래와 같습니다.import React, { useState } from 'react';import './App.css';const App = () => {const [icons, setIcons] = useState([]);const addIcon = () => {setIcons([...icons, { id: icons.length + 1 }]);};return (

{icons.map(icon => (

Icon {icon.id}

))}

);};export default App;★혹시 햇갈릴까봐 알려드립니다.위의 코드에서 ...icons에서 사용된 세 개의 점 ...은 JavaScript의 spread 연산자(전개 연산자)입니다.이 연산자는 여러 가지 상황에서 사용될 수 있지만, 이 경우에는 배열의 요소들을 '펼치는' 역할을 합니다.구체적으로 setIcons([...icons, { id: icons.length + 1 }]); 이 코드가 하는 일은 다음과 같습니다:...icons는 기존 icons 배열의 모든 요소를 새 배열에 펼쳐 넣습니다.그 뒤에 , { id: icons.length + 1 }로 새로운 객체를 추가합니다.이렇게 하면 기존 배열의 모든 요소를 포함하면서 새로운 요소를 추가한 새 배열이 생성됩니다.예를 들어, 만약 icons가 다음과 같았다면:[{ id: 1 }, { id: 2 }]setIcons([...icons, { id: icons.length + 1 }]);를 실행한 후의 새로운 상태는 다음과 같을 것입니다:[{ id: 1 }, { id: 2 }, { id: 3 }]■■■■■■■■■■■■■■■■■■■■■■■(2)CSS 코드는 아래와 같습니다..app {display: flex;flex-direction: column;align-items: center;height: 100vh;padding: 20px;}.screen {width: 1920px;height: 1080px;border: 2px solid black;overflow-y: auto;}.icon-container {display: flex;flex-wrap: wrap;align-content: flex-start;}.icon {width: 100px;height: 100px;margin: 10px;background-color: #f0f0f0;display: flex;justify-content: center;align-items: center;border: 1px solid #ccc;}button {margin-top: 20px;padding: 10px 20px;font-size: 16px;}

리액트로 웹페이지 아이콘 넣기

2개의 답변

Q&A 목록