개발 기록 남기기✍️

useReducer를 학습하기 전에 먼저 useContext부터 짚고 넘어가기! 정신차리고 레츠고🏃‍♀️ A 컴포넌트 > B 컴포넌트 > C 컴포넌트 순으로 계층적 구조를 이루고 있을 때, C 컴포넌트에서 조상인 A 컴포넌트의 상태를 가져오려고 한다. 이럴 땐 어떻게 해야할까? A 컴포넌트에서 B 컴포넌트의 props에 상태를 전달하고 B 컴포넌트에서 C 컴포넌트의 props에 상태를 전달하면 된다. 그런데 depth가 10이 되는 경우에도 모든 컴포넌트에 해당 상태를 props로 일일이 전달해야 하는걸까? 🎣 useContext 앞서 말한 현상을 props drilling이라고 한다. 대표적인 anti-pattern으로, 작동은 하겠지만 이렇게 작성할 경우 해당 props가 어디서부터 내려온 것인지 특..

useRef... 수업 때 들었지만 어렴풋이만 알아듣고 아직 완전히 이해하지 못해서 이참에 뿌셔보려고 한다!! 정신차리고 레츠고🏃‍♀️ useRef는 특정한 요소의 id 처럼 활용할 수 있을 뿐만 아니라, 변수를 만드는 것에도 사용할 수 있는 리액트 훅(hook)이다. useRef의 역할과, 어떻게 사용할 수 있는지를 알아보자. 💻 첫 번째) 특정 DOM 선택 JavaScript에서는 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector같은 DOM Selector 함수를 사용해서 DOM 을 선택한다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 있다. 상황 예시) 특정 요소의 크기 가져오기 스크롤바의 위치를 가져오거나 설정하기 특정 요..

CRA로 React 프로젝트를 시작하면 폴더 구조가 public, src로 나뉘어져 있는 것을 확인할 수 있다. 각 폴더의 역할은 무엇이고, 이미지 파일은 어느 폴더에서 관리하는 것이 좋을까? 또 jsx 파일 내에서 이미지 파일을 로드하는 방법은 무엇일까? 📁 public 정적 파일을 관리하는 폴더 (index.html을 비롯한 html 파일, img 등) webpack에 의해 관리되지 않는다. 파일이 후처리(post-process) 되거나 경량화(minify)되지 않고, build시 파일 원본이 그대로 build폴더에 복사된다. public 폴더에 접근하기 위해서는 PUBLIC_URL 환경변수를 사용해야한다. ( ) 경로가 잘못 되었거나 파일이 없을 경우 컴파일 단계에서 에러가 발생하지 않고, 404 ..

이 글은 리액트 공식 문서를 읽으며 공식 문서를 읽는 습관을 들이고 리액트의 기본적인 개념과 문법을 익히기 위 작성하게 되었습니다. 2-3번 정독할 예정으로, 추후 정리한 내용이 수정되거나 추가될 수 있습니다. 리액트 공식 문서 ➡️ https://reactjs.org/docs/hello-world.html 6. 이벤트 처리하기 React 엘리먼트와 DOM 엘리먼트의 이벤트 처리 방식 문법 차이 React의 이벤트는 소문자 대신 카멜 케이스를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. React는 기본 동작을 방지하려면 반드시 preventDefault를 명시적으로 호출해야 한다. /* HTML */ Activate Lasers /* React */ Activate La..

이 글은 리액트 공식 문서를 읽으며 공식 문서를 읽는 습관을 들이고 리액트의 기본적인 개념과 문법을 익히기 위 작성하게 되었습니다. 2-3번 정독할 예정으로, 추후 정리한 내용이 수정되거나 추가될 수 있습니다. 리액트 공식 문서 ➡️ https://reactjs.org/docs/hello-world.html 2. JSX 소개 const element = Hello, world!; 위의 문법은 JSX라 하며 JavaScript를 확장한 문법이다. UI가 어떻게 생겨야 하는지를 설명하기 위해 React와 함께 사용하는 것을 권장한다. JSX는 React 엘리먼트를 생성한다. JSX란? React에서는 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위..

Checkpoint 1 styled-component를 사용해서 css의 animation 기능을 넣어주고 싶을 때는 어떻게 하면 될까? keyframes css와 동일하게 keyframes를 사용해서 애니메이션을 구현할 수 있고, 컴포넌트 안에 animation : ${animation-name} 형식으로 넣으면 동작한다. Checkpoint 2 Box 컴포넌트 안에 span 태그를 넣으려고 한다. 스타일을 적용하는 모든 태그들을 다 컴포넌트 처리 해줘야 하는걸까? import styled from "styled-components"; const Wrapper = styled.div` display: flex; `; const Box = styled.div` display: flex; justify-c..

Checkpoint 1 만약 컴포넌트의 태그는 input에서 a태그로 바꾸고 싶은데 스타일은 input 컴포넌트의 속성을 그대로 유지하고 싶을 때 어떻게 하면 좋을까? "As" import styled from "styled-components"; const Father = styled.div` display: flex; `; const Btn = styled.button` color: white; background-color: tomato; border: 0; border-radius: 5px; `; function App() { return ( Log in Log in ); } export default App; 처럼 컴포넌트 안에 as="tagname"을 입력해주면 Btn의 스타일은 유지하면서 태..

Checkpoint 1 styled-component를 사용해서 색상이 다른 Box 두개를 만들어보겠다. import styled from "styled-components"; const Father = styled.div` display: flex; `; const Box1 = styled.div` background-color: teal; width: 100px; height: 100px; `; const Box2 = styled.div` background-color: orange; width: 100px; height: 100px; `; function App() { return ( ); } export default App; 정상적으로 작동하지만, Box1과 Box2에서 background-co..

CSS in JS CSS in JS는 스타일 정의를 CSS 파일이 아닌 JS로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 웹페이지를 HTML, CSS, JS 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JS를 몽땅 때려박는 패턴이 많이 사용되고 있다. React는 JSX를 사용해서 이미 JS가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS in JS 라이브러리만 사용하면 CSS도 손쉽게 JS에 삽입할 수 있다. JS에서 컴포넌트에 스타일 적용하는 방법 1. 컴포넌트에 직접 삽입 2. style.css App.js에 import "./style.css"로 stylesheet를 불러오고, 각 컴포넌트마다 처럼 className을 지정..