전체 오늘 어제
본문 바로가기
안녕하세요 :) FE 개발자 윤지홍입니다.
저는 리액트를 주로 사용해요.
UX/UI디자인에도 관심이 있어요.
Javascript React NextJs NodeJs Flutter HTML CSS PHP
👋
분류 전체보기 (21)
React에서 불변성을 지켜야하는 이유 불변성이란? 불변성이란 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만드는 것을 말한다. JS에서의 불변성 우선 아래 코드로 자바스크립트에서 불변성에대해 알아보자. const userA = { name: '호롤롤', phone: '000-0000-0000', address: '대한민국 어딘가', }; const userB = userA; userA.name = 'ㅋㅋㅋㅋ'; console.log(userA.name); // result: 'ㅋㅋㅋㅋ' console.log(userB.name); // result: 'ㅋㅋㅋㅋ' userA.name을 변경 했는데 userB.name도 같이 바뀌었다. (불변성이 잘 지켜지지 않았다 - userA의 메모리 주소와 userB가 가르키는 메모리 주소 값이 같기때..
2022년 08월 15일
useState 사용법 사용법 기본적으로 아래와 같이 사용하면되고 사용 시엔 불변성을 꼭 지켜줘야한다. const [state, setState] = useState({ title: '호롤롤로롤', content: '공백', }); 상태 값 변경은 setState를 사용하면 된다. setState({ ...state, content: 'ㅋㅋㅋㅋㅋㅋㅋ', }); setState를 사용하지 않고 직접 값을 변경하게 되면 리액트가 render 함수를 호출하지 않아 상태가 변경되어도 렌더링 되지 않는다. 또한 리액트는 setState를 실행했을때 이전 값과 비교 후 리렌더링 여부를 판단하기 때문에 직접적으로 값을 변경해선 안된다. 참고 setState는 비동기적으로 동작한다. const [counter, setCounter] = us..
2022년 08월 13일
brew 설치중 xcode-select 설치 안됨 문제상황 "현재 소프트웨어 업데이트 서버에서 사용할 수 없기 때문에 해당 소프트웨어를 설치할 수 없습니다." 맥 초기화 후 brew를 설치하려고 하니 xcode-select 설치 과정에서 위와 같은 안내 문구가 떴다.. 당연히 brew 설치도 에러로 중단되었다.. 해결방법 하필 소프트웨어가 Ventura beta 버전이어서 베타버전 사용하는게 문젠가 해서 버전을 내려야 하나 싶었는데 다행히 그냥 command line tools를 아래 링크에서 최신버전으로 다운받아서 해결했다.. https://developer.apple.com/download/all/
2022년 08월 11일
HOOK 이란? 훅 HOOK 이란? Hook은 React 16.8부터 추가되었고 기존 클래스형 컴포넌트에서만 사용가능하던 상태관리, 라이프사이클 메소드 등을 사용할 수 있게 해주는 기능이다. 16.8이전 버전에서는 함수형 컴포넌트 내에서 상태관리가 불가능했다. 라이프사이클 메소드 - componentDidMount, componentWillUnmount, componentDidUpdate Hook의 장점 - 코드가 간결해진다 - 가독성이 좋아진다 - HOC 헬을 벗어 날 수 있다. HOOK 사용 규칙 훅 사용시엔 리액트에서 규정한 규칙을 지켜야 코드가 정상적으로 실행되고 코드가 꼬이지 않는다. 사용 규칙은 아래와 같다. - 컴포넌트 최상위에서만 호출해야 한다. - React 함수 내에서만 호출해야 한다. - Custom..
2022년 08월 10일
React 시작하기 설치하기 원하는 프로젝트명을 입력해주면된다. $ npx create-react-app 프로젝트명 Typescript로 시작하기 $ npx create-react-app 프로젝트명 --template typescript or $ npx create-react-app 프로젝트명 app --scripts-version=react-scripts-ts 실행 포트 변경하기 기본적으로 3000번 포트를 사용해서 구동되는데 package.json에 실행 명령어를 아래와 같이 수정해 원하는 포트를 입력하면 된다. "scripts": { "start": "npm start -p 3001" } 그리고 .evn파일로도 변경할 수도 있는데 그냥 .env 파일을 만들어 아래 내용을 추가하면된다. PORT=3001
2022년 08월 03일

티스토리툴바