REACT9 React Hooks란? "hook의 이름이 왜 hook인지 생각해 보신 적 있으세요?" "갈고리...? 뭘 거는 게 아닐까요?" "....?" React Hooks란? Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. React 공식 문서에서 소개하는 React Hooks의 정의이다. 뭐 대략적으로 이야기하자면 React의 Class형 컴포넌트에서 사용할 수 있었던 상태 관리와 라이프 사이클 메서드를 Function 컴포넌트에서 Hook을 통해 사용할 수 있다는 뜻이다. 그렇다면 왜 굳이 Hook을 만들어 Function 컴포넌트로 넘어간 것일까? Class형 컴포넌트는 Fu.. 2024. 1. 29. CRA 없이 리액트 세팅하기 레벨 3 프로젝트에서는 CRA 없이 react를 세팅해야 했다. 우테코 시작 전에는 react를 설치할 땐 무조건 CRA 방법밖에 없는 줄 알았던 나... 이번을 기회로 CRA 없이 리액트를 세팅해 보기로 했다. 잠깐! CRA는 무엇이며, 장단점은 무엇일까? CRA는 'Create React App'의 준말로 React 기반의 프론트엔드 웹 애플리케이션을 빠르게 구축하는데 도움을 주는 툴이다. CRA를 사용하면 React 개발 환경을 쉽게 설정하고 복잡한 설정이나 빌드 작업을 없이 시작할 수 있다. 다만, 사용하지 않는 라이브러리가 같이 설치되고, 초기 번들 크기가 크다. 또, 자기 입맛대로 커스터마이징 하기에 제한이 있다. 어떤 걸 개발 의존성으로 설치해야 할까부터 평소에 무슨 의미인지 몰랐던 설정까지.. 2023. 7. 4. React에서 shape divider color-black으로 나올 때 사용법 https://www.shapedivider.app/ Shape Divider App Create fully responsive shape dividers for your next web project www.shapedivider.app shape divider를 이용해 포트폴리오 디자인을 살려보려고 했다. 사용법이 알려주는대로 그대로 복사하고 붙여넣기를 했는데,,, ...???? PostCSS를 사용해서 그럴까 일반 class로는 색상이 먹히지 않았다. className= {styles.어쩌구}로 바꿔줘도 전혀 먹질 않는데.. 포기하려는 찰나, 'DOWNLOAD SVG'가 보인다. 저걸 잘 활용하면 할 수 있지 않을까? 일단 다운로드를 받아본다. 파일을 열어보니 이거다!! 바로 작업하고 있던 reac.. 2021. 12. 24. REACT favicon 변경 먼저 png 파일을 ico 파일로 변경해준다. https://convertico.com/ ConvertICO.com - Convert PNG to ICO and ICO to PNG files This free online icons converter allows you to convert PNG to ICO files with ease. convertico.com 해당 페이지에서 이미지를 변경 후 저장하고 public 폴더에 넣어준다. 나는 원래 있던 favicon 파일을 삭제하고 바꾼 favicon을 favicon.ico로 저장했다. 만약 favicon 이름이 다르다면 link href 부분을 해당 이름으로 수정해주면 된다. 2021. 12. 5. REACT 이미지 올리기 <img src...> react로 이미지를 추가할 때 두가지 방법이 있다. 1. import 2. require 먼저, src 폴더 안에 img 파일을 생성한 후 추가할 이미지를 넣는다. logo.png를 nav에 logo로 사용해볼 것이다. 1. import 먼저 이미지 파일을 Import 해준다. ' import 사용할 이름 from 이미지 경로' 그리고 이미지 태그에 사용할 이름을 이용해 작성해준다. ' ' ( img를 image로 적는 실수는 범하지 않도록 하자.. ) 곰 발바닥 logo가 잘 추가된 것이 보인다. 2. require img 태그에 경로를 적어주는 방법이다. ' ' 1번과 달리 미리 선언할 필요가 .. 2021. 12. 5. Router Router 갓 개발을 시작한 초보라면 대체로 single page 개발을 해왔을거에요. 그러나 React를 시작하게 되고 프로젝트가 점점 복잡해질수록 하나의 페이지에서 감당하기 어려워지죠. 이때 router를 이용해 페이지를 나눠야 할 때가 온답니다. route 길, 노선이라는 뜻이 있어요. router는 뜻 그대로 우리에게 가는 길을 제공해주죠. 사용자가 url을 전달하면 router는 어떤 페이지로 연결할 지 결정해줘요. 보통 single page에서 작업을 하면 북마크나 뒤로가기, 앞으로 가기가 불가능해서 여러 불편함을 초래해요. 그러나 router를 이용하면 이 모든 것을 간단하게 이용할 수 있답니다. Router 사용법 먼저 router를 설치해줍니다. 터미널에 'yarn add react-r.. 2021. 12. 1. 이전 1 2 다음
