#01 리액트 숙련 : React Hooks 사용해서 input 태그 포커스 옮기기

#미션! 아이디가 10자리 입력되면 자동으로 비밀번호 필드로 이동하도록 코드를 짜보세요. 0. TIL ▶ useRef만 사용하면 가능하다고 생각했었는데, 딱 1번만 가능하고 새로고침을 하지 않으면 안 되었음. useEffect와 useRef를 함께 써야하는 것을 알게 되었음. ▶태그에 onChange 이벤트 부분에서 length를 구하는 것은 배치 업데이트와 관련됨! 이 부분은.. setId에 바로 반영이 되지 않고, 리랜더링이 끝나는 시점인 함수 끝나고 재호출되는 시점이였던거랑 유사한 것 같다..! 1. 내가 생각한 코드 import { useRef } from 'react'; function App() { const idRef = useRef(''); const pwRef = useRef(''); c..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 7.
• textsms

[React 숙련] 전역 스타일링 | Sass | css reset

1.전역 스타일링 (GlobalStyles) ▶ styled-components : 해당 컴포넌트 내에서만 가능! ▶ 프로젝트 전체를 아우르는 스타일 => createGlobalStyle 사용 [위치] GlobalStye.jsx import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` body { font-family: "Helvetica", "Arial", sans-serif; line-height: 1.5; } `; export default GlobalStyle; [위치] App.jsx ▶ 적용하고 싶은 곳 위에 사용하고 하나로 큰 태그로 묶어주기 import GlobalStyle from..

• format_list_bulleted React
• · 2023. 11. 7.
• textsms

[React 숙련] Css-in-JS (styled-components) 조건부 스타일링 가능

1.Css-in-JS ▶ 자바스크립트로 css코드를 작성하는 방식 2.Styled Components * 패키지 : 리액트는 없지만, 추가로 외부에서 가져와서 사용하는 외부 라이브러리 (3rd party => npm에 모여있음) (1) VS 코드에서 plug-in 설치필요 ( vscode-styled-components ) (2) 터미널에서 (yarn create react-app CRA 실행 후 (3) 터미널에서 yarn add styled-components 실행 (마켓에서 해당 패키지 가져옴)(4) 파일 package.json에서 확인 가능 import './App.css'; import styled from 'styled-components'; function App() { const StBox ..

• format_list_bulleted React
• · 2023. 11. 7.
• textsms

#08 리액트 입문 : todolist 만들기 (리액트 컴포넌트 분리)

TIL 리액트로 투두리스트를 구현하면서, JSX문법 사용과 랜더링에 대해 배울 수 있었다. 리랜더링이 끝나는 시점에 대해 알 수 있었고, useState를 사용하여 리액트에게 변경값을 알려주는 개념을 직접 구현해보니 조금은 더 알 수 있는 계기가 되었다. 1.todolist 필수 구현 1. 제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 구성 2. Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을 취소, isDone이 false 이면 라벨을 완료 로 조건부 렌더링 3. Todo의 상태가 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현 4. Layout의 최..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 6.
• textsms

[React 입문] Styling + 반복되는 구간 컴포넌트 처리

// rfce import React, { useState } from 'react'; import Layout from 'Layout'; const divStyle = { display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '10px', border: '1px solid green', width: '100px', height: '100px', }; function App() { return ( 감자 고구마 오이 가지 옥수수 ); } export default App; * Style을 객체로 넣고 자바스크립트로 표현하는 거라 {{}} 이렇게 표현함. * html의 class를 사용할때는 JSX에서는 className..

• format_list_bulleted React
• · 2023. 11. 2.
• textsms

[React 입문] Props Children

1. props children 사용 ( props의 주요개념 ) - 부모 컴포넌트에서 자식 컴포넌트로 props 해서 값 전달하듯이 -자식컴포넌트를 태그로 열고 닫으면 children으로 인식 됨 import React from 'react'; function User(props){ console.log(props); //{children: 헤헤} return {props.children}; //헤헤 } function App(){ return ( 헤헤 ; ); } export default App; 2. children의 용도 & 렌더링 방법 - 용도 : 항상 나와야하는 부분이라면 (머릿글 같은) 그 밑에 children을 받아서 사용하기

• format_list_bulleted React
• · 2023. 11. 1.
• textsms