React

웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.리액트를 개발한 Jordan Walke는 PHP용 컴포넌트 프레임워크인 XHP에서 영향을 받았다고 한다. 기존의 자바스크립트는 어떤 속성에 대해 값이 변경될 때, 그 속성에 해

HTML code inside of JavascriptJSX stands for Javascript XMLJS에 XML을 추가한 확장문법JSX는 React 컴포넌트를 만들 때 사용하는 문법어플리케이션을 컴포넌트로 나누어 관리하게 한다브라우저에서 실행하기 전에 Babel

리액트로 만들어진 앱을 이루는 최소한의 단위첫글자는 대문자로 시작한다 (소문자로 시작하는 컴포넌트를 DOM html 태그로 인식하기 때문)컴포넌트를 다른 컴포넌트에 넣을 수도 있음.함수형 컴포넌트와 클래스형 컴포넌트로 나누어진다.props를 입력받아 view상태에 따라

props란 properties를 줄인 표현으로, 컴포넌트 속성을 설정할 때 사용하는 요소이다부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해준다.어떤 값을 컴포넌트에 전달해줘야 할 때 사용한다.(객체 형태로 전달된다.)모든 React 컴포넌트는 자신의 p

state는 컴포넌트 내부에서 읽고 업데이트 할 수 있는 값이다 초깃값을 설정-> 렌더링 -> 업데이트 이런 과정으로 이루어진다버튼을 클릭해도 count는 증가하지 않는다→ why? 컴포넌트를 한번만 렌더링 되고 있기 때문이다.UI 가 업데이트 되지 않았기 때문에 화

ref는 특정 컴포넌트에 접근하는데 사용된다ref에 관한 수많은 블로그 글을 보았고, 강의도 들었지만 정확한 개념이 잘 이해되지 않는다…(좀 추상적?)목표는 ref가 정확이 무엇인지, prop과 state와의 명확한 차이점이 무엇인지, state와의 차이점은 무엇인지,

자바스크립트 배열의 map()함수데이터 배열을 컴포넌트 배열로 map하기활용 예제기존 배열에서 요소를 하나하나 추출해서 새로운 배열을 생성/변환한다.(맵핑한다 = 새롭게 뽑아만든 느낌)배열 요소를 하나씩 처리하기 때문에 루프 처리 작업에서도 활용되며, 각 요소는 인수로

useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지 알려준다.React는 우리가 넘긴 함수를 기억했다가(이 함수를 ‘effect’라고 부릅니다) DOM 업데이트를 수행한 이후에 불러낼 것이다컴포넌트 전체가 리렌

📍 설치하기https://reactrouter.com/docs/en/v6/getting-started/overviewpath 안에 url이 있다면, Home컴포넌트를 보여준다.Switch 말고 Routes를 쓰도록 하자React-Router-dom은 컴포넌트

아래의 코드가 좋지 않은 이유는 무엇일까?modal은 페이지 전체를 덮어야 한다모든 것들 위에 있어야 하므로 좋은 구조는 아니다처음에 기준이 되는 엘리먼트를 지정해야 한다ReactModal.setAppElement('\`\`\` htmlThe main advantage

컴포넌트에 state를 관리하고 생성하기 위해서 지금까지 useState를 사용해왔다하지만 useReducer는 useState를 대체할 수 있는 hook이다useState보다 더 복잡한 상태관리를 위한 hook이라고 할 수 있다useReducer는 reducer, d

reducer함수에는 주로 if문과 switch문이 사용된다dispatch 내 action의 내용은 여러가지가 있는데 type, payload, id를 주로 사용한다 \- type은 reducer 함수 내의 switch문을 사용할 때 주로 사용된다(어떤 행동인지 알려

일반적으로 props를 통해 컴포넌트 끼리 데이터를 전달한다Prop Drilling  가장 아래 컴포넌트만 데이터가 필요할 때에도 모든 상위 컴포넌트들도 단계를 거쳐야 한다는 것을 말한다아래의 예시 코드를 살펴보면가장 최상위의 App 컴포넌트에서 setCount라는 u

context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환합니다. context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 <MyContext.Provider>의 value

export 란? - 내보내기를 뜻한다export name 은 여러개를 사용해도 된다그리고 받아올 때는 반드시 {} 중괄호를 사용해서 받아온다(단 export class 나 function할 땐 세미콜론을 붙이지 않는다)예시export default는 한 모듈당 반드시