본문 바로가기

React5

state 정의하는 방법 state : 컴포넌트 내에서 선언하는 데이터 ex ) ⓐ 데이터를 관리하는데에 사용 ⓑ 헤더가 보이고 안보이고를 결정, 팝업창이 뜨고 안뜨고를 결정하는 데에도 사용 = UI와 관련하여 작업하는 데에도 사용될 수 있습니다. 사용방법 state는 class components에서만 사용이 가능합니다. Functional Components에서는 사용이 불가능합니다. 이 공식을 Class Fields 문법을 사용하면 위처럼 간단하게 선언할 수 있습니다. 클래스 블록 내부에서 할당 연산자 (=)를 통해 인스턴스 속성을 지정할 수 있는 문법입니다. 여기서 인스턴스 속성이란 간단하게 클래스 내부의 변수라고 생각하시면 됩니다. 2021. 6. 17.
ES6의 Template Liteal 문법 맛보기 ES6의 Template Liteal 문법 맛보기 이렇게 Template Liteal 문법을 사용하면 더 간단하게 변수가 포함된 문자열을 생성할 수 있어요. Template Liteal 을 사용하는 이유는 특정 상태에 따라 다른 스타일을 적용하기 위해서입니다. style-components의 또 다른 장점입니다. 예를 들어 flag 라는 변수에 true가 들어 있으면 배경색이 흰색이고, false가 들어가 있으면 배경색이 파란색인 것과 같이 말입니다. * style-components는 styled.태그명을 통해 스타일링 된 컴포넌트를 생성합니다. 2021. 6. 17.
React 개발환경 세팅, SASS 라이브러리 설치 React 프로젝트 생성방법 VScode 터미널창에 입력해주세요. create-react-app [프로젝트명] 좌측을 보시면 생성된 파일 내에 세팅이 된 것이 보이시죠? 원래 HTML Elemet에 Clss명을 설정하기 위해서는 Class 속성을 사용해야합니다. React에서는 Class가 아닌 clssName 이라는 속성을 사용하여 클래스명을 지정합니다. class 속성을 사용하여 클래스명을 지정하면 프로젝트 실행시, console에 이와 관련된 오류가 출력되니 올바르게 지정해주세요. 2021. 6. 17.
Yarn 오류 발생시 해결방법 제가 Yarn 다운하면서 오류로 인해 여러번 여러가지 시도를 해보았는데 30분동안 부여잡고 하다가 성공해서 적어두려고 합니다! 레지스트리 타입에는 총 4가지가 있습니다. 모든 스크립트를 막는 타입은 바로 'Restricted' 입니다. 이 타입하나로 정말 애먹었답니다,, 저와 같은 이유로 애먹고 계시다면 바로 아래를 따라해주세요 ! 바로 이 부분인데 여러분이 따라해주실 부분을 차근차근 적어드릴게요 ! 1. Powersheell 을 입력해주세요. 윈도우 파워쉘을 열어도 되지만 저는 VS code 터미널에 입력했습니다. 2. ExecutionPolicy 를 입력해주세요. 아래에 나오는 Restricted는 현재 레지스트리 형식이에요 . 저와 같은 단어가 보이신다면 계속 이어서 따라해주세요. 3. Set-Ex.. 2021. 6. 17.