리액트

크롬 개발자 도구에서 componets, profiler가 생긴다.❗ 확장프로그램 설치해도 보이지않으면 1) vscode 터미널에서 아래코드로 설치해주고 새로고침!2) chrome://extensions 들어가서React Development tools 클릭하면 "파일

JSX는 자바스크립트의 확장 문법이다. 리액트로 코드를 작성할 때 HTML 문법과 비슷한 이 JSX 문법을 활용하면 훨씬 더 편리하게 화면에 나타낼 코드를 작성할 수가 있게 됩니다.여러 단어가 조합된 몇몇 속성들을 사용할 때는 반드시 카멜 케이스(Camel Case)로

css style 정의와 달라지는 점 3가지를 유의해야 될 것 같다.아래 리액트 style과 비교하면서 살펴보자.리액트는 객체로서 style 객체를 만들기 때문에 3가지가 달라질 수 밖에 없습니다.마지막으로 이미지 주소를 나태낼때 import 로 이미지 파일을 불러온

useEffect() 함수를 사용하면 처음 컴포넌트를 렌더링하고 콜백 함수를 실행할 수 있었는데요.이때 콜백 함수랑 빈 배열로 useEffect() 함수를 실행하면 딱 한 번만 실행할 수 있었습니다. 컴포넌트가 처음 렌더링 되고 나면 리액트가 콜백 함수를 기억해뒀다가

useRef는 리액트 훅의 한 종류로, Ref는 reference(참조)의 줄임말이다. useRef를 이용하면 특정한 DOM요소에 접근이 가능하며, 불필요한 재렌더링을 하지 않는다는 장점이 있다.useRef를 사용하면 손쉽게 input에 접근할 수 있다.자바스크립트의

리액트 context는 앱에서 컴포넌트에게 props를 사용하지 않고 필요한 데이터를 넘겨주며 사용할 수 있게 해줍니다.다시 말해, 리액트 context는 컴포넌트들이 데이터(state)를 더 쉽게 공유할 수 있도록 해줍니다.리액트 context는 앱의 모든 컴포넌트에

많은 컴포넌트에서 사용하는 데이터를 반복적인 prop전달(prop Drilling)없이 공유provider 안의 컴포넌트 어디서든 props를 거치지 않고 데이터를 자유롭게 사용가능.

react에서 router 처리를 할 때, Link, Nav 두 컴포넌트를 자주 사용합니다.정확한 이해없이 사용했던 것 같아 공식 문서를 바탕으로 특징 및 차이점을 정리해보았습니다.Link와 Nav 두 컴포넌트 모두 화면에 태그로 렌더링 되고, to 속성에 정의해 둔