프로그래밍 잡동사니

Create React App create-react-app은 React에 개발 서버 접근, 자동 새로고침 및 다양한 사전 설정을 제공 node.js 설치 및 create-react-app 생성 -> src에서 index.js, App.js만 남기고 삭제, 내용 정리 ReactDOM.render( , document.getElementById('root') ); 마찬가지로 index.js에서 index.html의 root에 App 컴포넌트를 렌더링하고 있다 import PropTypes from "prop-types"; import styles from "./Button.module.css"; function Button({ text }) { return {text}; } Button.propTypes ..

State Counter 버튼을 누르면 counter가 하나씩 증가하는 페이지를 구성하는 경우, 첫 렌더링 이후 계속해서 값을 띄우기 위해 render() 함수를 만들어 반복 실행했다 여기저기서 render() 함수를 호출하는 것은 매우 비효율적인데,, useState를 활용하면 데이터와, 데이터의 업데이트 함수를 바로 생성할 수 있다 이전 값을 활용해 State를 변경하려면 setState()함수에 직접 넣어줘도 되지만,, setCounter(counter+1); State가 다른 곳에서 변경될 수도 있기 때문에 current 함수로 처리하는 것이 안전하다! setCounter((current) => current + 1); Super Converter JSX 상에서는 일부 HTML 코드를 변환해 사용..

Why React? 2021년 말 기준 상위 1만개 웹사이트 중 44.76%가 React JS 사용 페이스북의 막대한 투자와 지속적인 업데이트 프론트엔드 JS 라이브러리 중 가장 큰 JS 커뮤니티 Start React! CRA 없이 React를 사용하려면 우선 index.html에서 React JS와 ReactDOM 코드를 import해준다 React JS는 element를 생성하고 이벤트 추가, ReactDOM은 element들을 HTML로 바꿔준다 element는 createElement로 생성되며 ‘HTML 태그/props를 포함한 object/content’로 구성 ReactDOM이 body의 id가 root인 비어있는 div에 생성된 element들을 랜더링한다 addEventListener나 ..

심플한 레이아웃을 위해 Campus Map 메뉴를 드롭 다운으로 재구성하려고 했는데,, 생각보다 styled-components를 활용해 드롭 다운을 구현한 자료가 없어서 고생 좀 했다 그런 의미에서 여차저차 구현한 내용을 블로그에 정리해 공유하려 한다! 우선 각각 li, ul 역할을 해줄 컴포넌트들을 정의해준다 const Li = styled.li` list-style: none; `; const Ul = styled.ul` list-style: none; font-style: normal; font-weight: bold; font-size: 16px; color: #666666; line-height: 22px; `; 상위 리스트와 하위 리스트를 요로코롬 구성해주고 (권한 관련 코드는 무시해주자) ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

React를 왜 쓸까? 설치 및 셋팅 ‘npx create-react-app (앱 이름)’: 리액트 프로젝트 생성 ‘npm start’: 실행 결과 미리보기 (Ctrl + C -> 서버 종료) js파일 상단에 /* eslint-disable */ 을 추가해 warning 제거 App.js 파일: 메인 페이지(index.html)에 들어갈 HTML 짜는 곳 node_modules 폴더: React 구동에 필요한 라이브러리들을 모아 놓은 폴더 public 폴더: 동적으로 바뀌지 않는 static 파일 보관함 src 폴더: 실질적으로 개발하는 소스코드를 모아 놓은 폴더 JSX 사용법 App.js 파일 function App() 내부에 HTML처럼 생긴 JSX로 코딩할 수 있다 서버에서 데이터를 받아와 변수로 ..