na_0_i

state는 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어됩니다. 클래스의 생명주기 메서드 마운팅: 처음 DOM에 렌더링 될 때 언마운팅: 생성된 DOM이 삭제될 때 클래스 컴포넌트에서는 특별한 메서드를 사용하여 컴포넌트가 마운트 / 언마운트 될 때 일부 코드를 작동시킬 수 있고 이러한 메서드를 생명주기 메서드라고 불립니다. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmou..

TIL(Today I Learned)/React 2022. 7. 21. 22:42

컴포넌트는 Javascript의 함수와 유사합니다. props라는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트는 props 객체 인자를 받은 후 React 엘리먼트를 반환하고 이러한 컴포넌트는 Javascript 함수이기 때문에 말 그래도 함수 컴포넌트라고 불립니다. ES6 class를 사용하여 컴포넌트를 정의할 수도 있으며 React 관점에서 두 유형의 컴포넌트는 동일합니다. 컴포넌트 추출 props의 이름은 사용될 context가 아닌 컴포넌트 자체의 관점에서 짓도록 권장됩니다. UI 일부가 여러번 사용되거나 UI 일부가 자체적으로 복잡한 경우에는 별도의 컴포넌트로 만드는게 좋습니다. props는 읽기 전용 컴..

TIL(Today I Learned)/React 2022. 7. 21. 21:40

엘리먼트 엘리먼트는 React 앱의 가장 작은 단위이며 화면에 표시할 내용을 기술합니다. React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다. React 엘리먼트는 컴포넌트와는 다른 개념이며, 엘리먼트는 컴포넌트의 구성요소입니다. DOM에 엘리먼트 렌더링하기 리액트로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. (기존 앱에 통합하려는 경우 많은 수의 독립된 루트 DOM 노드가 있을 수도 있긴 합니다.) React 앨리먼트를 루트 DOM 노드에 렌더링하려면 ReactDOM.render()에 엘리먼트를 전달합니다. const element = Hello, world; ReactDOM.render(element, document.getElementById('root')); 렌..

TIL(Today I Learned)/React 2022. 7. 20. 22:43

JSX const element = Hello, world!; JSX는 Javascript를 확장한 문법입니다. JSX는 React 엘리먼트를 생성합니다. JSX란? JSX의 중괄호 안에는 유효한 모든 Javascript 표현식을 넣을 수 있습니다. 컴파일이 끝나면, JSX 표현식은 정규 Javascript 함수 호출이 되고 Javascript 객체로 평가됩니다. 이 말인 즉슨, JSX는 if 내부, 반복문에서의 사용 / 변수 할당 / 인자로서의 사용 / 함수로부터 반환이 전부 가능하다는 뜻입니다. JSX 속성 정의 어트리뷰트에 따옴표 → 문자열 리터럴을 정의할 수 있습니다. 중괄호 → Javascript 표현식 삽입할 수 있습니다. const element = link ; const element = ..

TIL(Today I Learned)/React 2022. 7. 20. 22:16

yarn add -D, npm install -D에서 D의 의미 라이브러리를 설치하던 중 어떤 패키지는 -D를 붙여 설치를 했다. yarn add react-router-dom yarn add recoil yarn add -D typescript eslint prettier 왜 어떤 패키지는 그냥 yarn add를 사용하고 어떤 패키지는 -D를 붙여서 사용할까? 그냥 yarn add와 yarn add -D의 차이가 무엇인지에 대해 알아보자! package.json 에서 확인하기 라이브러리 설치 후 package.json 파일을 열어보았더니 dependencies와 devDependencies로 나뉘어 깔아져 있는 것을 확인할 수 있었다! dependencies와 devDependencies의 차이 dep..

TIL(Today I Learned)/그 외 2022. 7. 6. 20:52

jsconfig.json으로 절대 경로 설정하기 리액트에서 파일 위치를 import 할때 import Main from '../../../../../Main';(상대경로) 과 같이 쓰게 되면 파일 위치가 어디 있는지 찾는데만 한참이 걸릴 수 있다. 즉, 상대경로보다 절대경로로 쓰는 게 가독성이 좋다! 그래서 평소처럼 아무렇지 않게 절대경로로 썼는데 이런 오류가 발생했다. 알고보니 절대 경로를 사용하려면 jsconfig.json 파일을 이용해 절대 경로를 설정해주어야 한다. jsconfig.json 란? 디렉토리 에 jsconfig.json파일이 있으면 해당 디렉토리가 JavaScript 프로젝트의 루트임을 나타낸다. 프로젝트에 속한 파일, 프로젝트에서 제외할 파일 및 컴파일러 옵션을 나열할 수 있다. j..

TIL(Today I Learned)/그 외 2022. 6. 28. 10:08