react

[React] CRA에서 모듈 import 시 절대경로 사용하기

절대경로 설정 최상위 루트 폴더에 jsconfig.json 파일을 생성한 뒤, 아래 코드를 붙여넣어 준다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } TypeScript를 쓰는 경우엔 기존 tsconfig.json 파일에서 compilerOptions 설정을 수정하면 된다. ES6 모듈 import 시 현재 파일 위치 기준의 상대경로(../ ./)가 아닌 src 폴더를 기준으로 한 절대경로를 사용할 수 있다. 사용 예시 Home.js에서 Button 컴포넌트를 불러온다면, 상대경로 👉 import Button from '../components/Button' 절대경로 👉 import Button from 'components/Butt..

[React] 양방향/단방향 바인딩, 부모 컴포넌트의 state 바꾸기

↔ 양방향 바인딩? 양방향 데이터 바인딩에서는 부모 컴포넌트와 자식 컴포넌트 간에 데이터가 서로 양방향으로 흐른다. 부모와 자식 모두 데이터를 직접 변경할 수 있다. model(JavaScript)과 view(HTML)가 있을 때, 양방향 데이터 바인딩은 model이 업데이트 되면 view가 업데이트 되고, 반대로 view가 업데이트되면 model이 업데이트 되는 것이다. 이를 자동 동기화라고도 한다. 상호 구독 관계라고 생각하면 이해하기 쉽다. 하지만 변화 가능성이 열려있다 보니 데이터 흐름을 예상하기 어렵다는 단점이 있다. 이같은 단점의 대표적인 사례로 페이스북의 알림 버그가 있다. 👇 리액트는 단방향 바인딩 리액트에서 일반적으로 state 관리를 할 때는 props를 통해 부모에서 자식 컴포넌트로의..