결론 : 리스트에서 toggle해서 컴포넌트에 전해주는 방식으로 코딩해야 개별 선택이 된다. 안됐을 때 :( 컴포넌트에서만 toggle하는 것으로 설계 : 리스트에서 뿌려진 모든 버튼이 선택됨 됐을 때 :) 리스트에서 toggle하고 컴포넌트에 props로 전달하는 방식으로 설계 : 정상 작동 postRestaurant.jsx (컴포넌트) import { useState } from 'react'; import { Link } from "react-router-dom"; const posts = ({posts, loading, reverse}) => { return( { loading && loading ... } { posts.map((post,index) => ( {post.id} {post.titl..

컴퓨터를 옮겨가며 react 프로젝트를 작업하면 항상 뜨는 에러가 Permission denied였다. 리액트가 노드 모듈스를 참고해서 빌드해야하는데 권한이 없는 것이다. 터미널에 아래 명령어를 입력하여 권한을 풀어줘야 한다. $ sudo chmod +x node_modules/.bin/react-scripts

리액트의 모든 컴포넌트에는 생명주기(LifeCycle)이 존재한다. 컴포넌트의 수명은 페이지가 랜더링되기 전인 준비 과정에서 시작하며, 페이지에서 사라질 때 끝난다. 리액트에서 제공하는 라이프 사이클 메서드를 통해 1) 처음 랜더링할 때, 2) 컴포넌트가 업데이트 될 때 혹은 전/후, 3) 컴포넌트가 페이지에서 사라질 때의 시점에 함수를 호출할 수 있다. 각 시점 별로 분류한 호출 메소드는 다음과 같다. # Mount(생성) 시 호출하는 method - constructor : 생성자 - getDerivedStateFromProps : props로 받아온 값을 state에 동기화하는 메소드 static getDerivedStateFromProps(nextProps, prevState) { if(nextP..

책이나 강의를 살펴보면서 Ref에 대하여 두 가지 정도로 정리할 수 있었다. "1) 돔 요소를 선택할 수 있는 기능이다. 2) 값 변화가 일어나지만, state와는 달리 변화 시 re-render가 일어나지는 않는다." 1) Ref값을 이용해서 돔 요소를 선택할 수 있다. useRef()를 이용해서 지역 변수를 선언한 뒤, HTML 태그에 ref를 지정해주면 해당 HTML 태그와 선언한 Ref의 값이 연결된다. ref의 current 속성을 이용하면 엘리먼트를 제어할 수 있으며, 보통 input 엘리먼트와 audio 파일에 current 속성이 자주 사용된다. import { useState, useRef } from "react"; const DiaryItem = ({ onEdit, onRemove, ..

클래스형 컴포넌트 rcc + 엔터로 손쉽게 생성할 수 있다. 최근에는 함수형 컴포넌트를 더 많이 쓰는 추세이지만, 기존에 리액트로 만들어진 서비스들을 유지 보수하기 위해서 클래스형 컴포넌트를 알아야한다. state와 props가 변화하지 않는 컴포넌트 혹은 랜더를 한번만 시킬 컴포넌트는 'PureComponent'로 만들어준다. 이렇게되면 부모 컴포넌트에서 랜더가 일어나더라도 호출되지 않으며, 원하지 않는 랜더를 줄여 서비스의 성능을 향상시킬 수 있다. 함수형 컴포넌트 rsc + 엔터로 손쉽게 생성할 수 있다. // 함수형 컴포넌트 템플릿 import React from 'react'; const func = () => { return ( ); }; export default func; state와 re..

리액트의 컴포넌트가 가질 수 있는 데이터로는 State와 Props가 있다. State는 컴포넌트 내부에서 값이 지정되고, Props는 자식 컴포넌트가 외부의 부모 컴포넌트에게 전달받는 값이다. State 작성 방법 (생성자 작성 방법), State 변경 방법 constructor(props) { super(props); this.state = { value:0 }; } State는 컴포넌트 안의 생성자 부분에서 초기값을 지정하는 방식으로 작성한다. props는 굳이 생성자에 작성해주지 않아도 this.props.propsName으로 부모가 전달해준 값을 받을 수 있기 때문에 생성자에서 props 정의 부분은 생략하고 랜더 함수 위에 간단히 this.state = { } 혹은 state = { }로 작성..