React에서 form 양식을 입력받는 방법 중 하나로 useRef를 사용할 수 있다. useRef를 통해서 DOM을 선택하고, 해당 DOM의 value를 받아노는 방법이다 사용법은 아래와 같다. React의 기능 중 하나인 useRef를 불러오고 객체를 생성하여 변수에 담는다. 생성한 객체를 원하는 태그의 속성 ref의 값으로 넣는다. 변수명.current 로 해당 DOM을 불러올 수 있다. 주의사항으로 이렇게 불러온 DOM을 직접 조작하면 안 된다는 것이다. 리액트에서 화면에 출력되는 것을 바꾸고 싶다면 state를 변경해야 한다.
https://actually-i-am.tistory.com/47 리액트의 기초 - props 이전 포스트 : https://actually-i-am.tistory.com/46 리액트의 기초 - 컴포넌트와 JSX 리액트를 간단하게 설명하자면 컴포넌트들이라고 할 수 있다. 컴포넌트는 무엇인가 그렇다면 컴포넌트는 무엇인가? 그 actually-i-am.tistory.com props는 컴포넌트를 쓰면서 특정값을 전달해주고 싶을 때 사용한다. 그리고 그 특정값으로 JSX를 넘길 수도 있다. 특별한 props인 children을 사용하면 가능하다. 템플릿을 재사용하고 싶을 때 활용할 수 있다. 사용 예시는 아래와 같다. function App() { return ( ); } import React from 'r..
배열을 렌더링 하는 방법은 배열 안에 JSX코드를 넣는 것이다. map메서드 등을 사용하면 쉽게 만들 수 있다. 하지만 이런식으로 렌더링을 효과적으로 하기 위해서는 key라는 고유 속성값을 넣어줄 필요가 있다. import React from 'react'; function UserList(){ const users = [ { id : 1, username : '이름1', email: '1112xxx@xxxx.xxx' }, { id : 2, username : '이름2', email: '2223xxx@xxxx.xxx' }, { id : 3, username : '이름3', email: '33343xxx@xxxx.xxx' }, ]; return ( { users.map( user => () // key값으..
리액트 컴포넌트를 스타일링 하는 방법은 sass, css module, styled components 등의 방법이 있다. 그중 CSS 모듈은 기존 css파일이 특정 컴포넌트로 범위가 지정되도록 만든 것이다. css 모듈을 사용하면 class 이름이 중복되는 것을 방지할 수 있다. 사용 방법은 파일 확장자를 파일명.module.css로 만들어서 사용하면 된다. 이것이 브라우저에서 나타날때 코드가 변환되어서 컴포너트에 종속되도록 만들어 준다. 코드 예시는 아래와 같다. import REact from "react"; import styles from "./파일명.module.css" function Box(){ return {styles.Box} ; } export default Box; 레거시 프로젝트에..
라우팅이란 URL 주소에 따라 어떤 UI를 보여줄지 규칙을 정하는 작업을 말한다. 기본적으로 리액트는 component에 기능이 중점되어있기 때문에 라우팅을 하기 위해서는 다른 회사의 라이브러리를 추가해야 한다. 많이 사용되는 라이브러리는 react-router-dom이다. Route 사용법 기본적인 사용법은 아래와 같다. 패키지 설치 : npm install react-router-dom 설치한 패키지를 import해서 그 안의 BrowserRouter로 라우팅 할 컴포넌트를 감싸준다. (최상위 컴포넌트를 감싸주면 된다) 라우터를 사용할 컴포넌트에서 Router를 import해서 사용하면 된다. Router의 사용법이 5버전에서 6버전으로 넘어가면서 꽤 바꼈다. 내 경우는 5버전 강의를 보면서 6버전을..
이전 포스트 : https://actually-i-am.tistory.com/46 리액트의 기초 - 컴포넌트와 JSX 리액트를 간단하게 설명하자면 컴포넌트들이라고 할 수 있다. 컴포넌트는 무엇인가 그렇다면 컴포넌트는 무엇인가? 그것을 알기 전에 react는 결국 UI를 만들어주기 위한 도구라는 것을 환기해보 actually-i-am.tistory.com 이전 포스팅에서 컴포넌트는 재사용하기 좋다고 설명했지만 props없이는 무리가 있다. 이전 포스팅에서 정의했던 Hello컴포넌트를 다시 보자. 만약에 'Hello, 유저이름'과 같은 식으로 나타내고 싶다고 생각을 해주자. 3명의 이름을 부르려면 3개의 컴포넌트가 필요하다. 하지만 props를 사용한다면 아래 하나의 컴포넌트를 재사용 가능하다. import..
리액트를 간단하게 설명하자면 컴포넌트들이라고 할 수 있다. 컴포넌트는 무엇인가 그렇다면 컴포넌트는 무엇인가? 그것을 알기 전에 react는 결국 UI를 만들어주기 위한 도구라는 것을 환기해보자. 보통 사이트는 html, css, js로 만들어져 있는데, 리액트는 이것들을 컴포넌트 단위로 묶어서 UI를 만든다. 예를들어서 버튼 하나도 컴포넌트라고 할 수 있다. 컴포넌트는 독립적이고, 고립되어 있으며 재사용이 가능하다. 컴포넌트를 만드는 방법은 아래와 같다. 다음은 Hello라는 컴포넌트를 만드는 코드이다. import React from 'react'; function Hello(){ return Hello; } export default Hello; 위 코드에서 눈에 띄는 것은 html과 비슷해보이는 코..
리액트는 UI를 만드는 자바스크립트 라이브러리이다. CSR을 하기 때문에 앱과 같은 사용성을 제공할 수 있다. 리액트를 왜 사용하는가 JavaScript만 사용할 때 힘든 지점 기존 자바스크립트에서는 DOM을 업데이트하기 위해서는 명령형 접근을 해야 했다. 즉, 모든 세부 단계의 코드를 작성해야했다는 말이다. 예를 들어서, 위 이미지처럼 생긴 할 일 관리 어플리케이션을 만든다고 생각하고, 수도코드를 작성해보자. /* 할 일 입력받기 */ // 1. 할 일을 입력받는 form을 html로 코딩한다. // 2. 할 일을 입력받는 form 노드를 찾아둔다. // 3. form노드가 submit될 때, input에 입력한 값을 저장해둔다. // 4. 새로운 element를 생성하고, 그 안에 2번에 저장한 값을..
CORS 에러 만나보기 우선 CORS 에러를 만나보자. 개발자 툴을 열고 콘솔탭에서 아래 코드를 입력해보자. fetch('https://www.google.com/'); 크롬에서는 아래와 같은 에러메세지를 마주할 수 있다. (브라우저마다 에러메세지가 조금씩 다르게 뜰 수 있다.) Access to fetch at 'https://www.google.com/' from origin 'https://actually-i-am.tistory.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an..
사실 오늘이 2021년의 마지막이라는 것이 아직도 실감이 나지 않는다. 2021년을 별로 치열하게 살지 않아서 그런가? 싶으면 분명 나는 2021년 내내 바쁘기만 했다. 바쁘기만 하고 남는게 없던걸까? 아니면 바쁘게 살아서 기억이 나지 않는걸까? 올해보다 나은 2022년을 준비하기 위해 2021년을 돌아보려고 한다. 2021년의 나는 무엇을 했는가 2021년에 내가 한 일을 굵직하게 나열하면 다음과 같다. 1분기 (1~3월) 💻 프론트엔드 개발자가 되기 위한 공부를 했다. 🏃♀️ 구직활동을 시작했다. 🦾 지인(백엔드 개발자)와 새로운 프로젝트를 기획했다. 2분기 (4~6월) 🎊 취업에 성공했다. ♟ 새로운 회사에 적응했다. 3분기 (7~9월) 🥼 자기계발을 위해 공부했다. 4분기 (10~12월) 🦾 전..
- Total
- Today
- Yesterday
- 네트워크
- TIL
- 정규표현식
- AWS
- 토이프로젝트
- 강의후기
- 리덕스
- 취미
- 삽질방시
- 앨리스배열
- 마크다운
- 회고록
- 타입스크립트
- 프로젝트
- 보안
- 팁
- autoplay
- 하우징 도색
- 개발일지
- 키크론 v10
- 리액트
- 키보드
- 삽질방지
- storybook
- DevOps
- 웹퍼블리셔
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |