꾸준히 성장하는 개발자

React로 로그인 기능을 만들면서 패스워드를 입력하고 보여주길 원할 때 버튼을 누르면 패스워드가 보이고 다시 누르면 보이지 않게 하는 기능을 만들어보자 // useState로 type과 visible로 나눠 state를 관리해준다 const [pwType, setpwType] = useState({ type: "password", visible: false, }); 위에서 state에서 type은 password로 되어 있기 때문에 input에서의 값들은 보이지 않을 것이다. // input 의 타입을 바꿔준다 // 이 태그를 클릭할 때 비밀번호가 보여지고 숨겨지는 기능이 실행된다. {pwType.visible ? "비밀번호 숨기기" : "비밀번호 보기"} 위의 span 태그를 클릭하면 아래의 이벤트가..

dark mode light mode styled components를 이용하면 테마를 이렇게 바꾸는 것이 가능하다 //Index.js import React from "react"; import ReactDOM from "react-dom"; import { ThemeProvider } from "styled-components"; import App from "./App"; const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111", }; const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke", }; ReactDOM.render( , document.getElement..

react에서는 props의 데이터 타입을 잘못 입력해도 문법상 문제가 없다면 에러메시지 없이 화면 출력이 된다 function App() { return ( ); } const root = document.getElementById("root"); ReactDOM.render(, root); text prop에는 string으로 써야 하고 fontSize prop에는 숫자로 작성을 해야 하는데 이렇게 작성이 되어도 react에서는 오류로 인지하지 못하고 화면에 출력이 되게 된다. 이런 경우에 이런 실수를 막을 수 있도록 하는 방법이 props type이다 이걸 위에 추가해주고 Btn.propTypes = { text: PropTypes.string, fontSize: PropTypes.number, }..

https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design react프로젝트를 열고 터미널에 npm i antd 를 입력 후 install 해준다. Ant Design에는 대부분은 예쁘게 만들어진 컴포넌트가 있는데 그 컴포넌트를 사용하면 자동으로 스타일도 적용되고, 동작도 되어야 한다. 제작자 입장에서는 컴포넌트 소스, 별도로 스타일 파일도 제공을 해야 한다. react에서는 css모듈 방식이 더 범용적인 방식이다. 그렇기 때문에 대표적인 방식인 css방식을 제공하고 있다. 그래서 ant design의 css파일을 우선 포함시키는 과정이 필요하다. import "./index.css"; 위에 i..

https://developer.mozilla.org/ko/docs/Web/Web_Components 웹 컴포넌트 | MDN 웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다. developer.mozilla.org shadow DOM 이란? 웹 컴포넌트의 중요한 측면은 캡슐화인데 캡슐화를 통해 마크업 구조, 스타일, 동작을 숨기고 페이지의 다른 코드로부터의 분리하여 각기 다른 부분들이 충돌하지 않게 하고, 코드가 깔끔하게 유지될 수 있게 한다. 간단하게 어떤 HTML 안에 본래 HTML과 영향을 주지 않는 별도의 HTML덩어리라고 보면 된다. 사용해보기 react 프로젝트를 열고 터미널에 npm ..

스타일을 자동으로 넣어주고 클래스네임도 자동으로 넣어주는 기능 최대한 오염이 되지 않는 스타일을 먹일수 있는 좋은 방법이다. 터미널에 작성하여 install 해준다. npm i styled-components 설치가 다 되었으면 사용해보자 사용하는 방법으로 버튼 import styled from 'styled-components'; const StyledButton =styled.button` background : transparent; border-radius:3px; border:2px solid palevioletred; color: palevioletred; margin: 0 1em; padding: 0.25em 1em; font-size:20px; `; export default StyledB..

리액트가 하는 일 리액트의 핵심 모듈 2개로 리액트가 하는 일 알아보기 -react-dom -react // 1. 리액트 컴포넌트 => HTMLElement 연결하기 import ReactDOM from 'react-dom'; // 2. 리액트 컴포넌트 만들기 import React from 'react'; ReactDOM.render : main이라고 생각하면 될 듯 ,, 시작 함수 JS, JSX를 사용한 React 컴포넌트를 HTMLElement에 연결해주는 역할 "만들어진 리액트 컴포넌트" 를 실제 HTMLElement에 연결할 때 ReactDOM 라이브러리를 이용합니다. https://reactjs.org/docs/react-dom.html ReactDOM – React A JavaScript l..