h e 1 1 o !

다른 컴포넌트에서 한 컴포넌트로 html 코드의 결과값에 직접 접근할 수 없다. 다른 컴포넌트에 저장 된 데이터를 다른 컴포넌트로 직접 보낼 수 없다. props로 가능하다. ✔️ 리액트의 컴포넌트는 html 요소처럼 속성을 가질 수 있다. 이 속성을 props라고 부르며, 직접 설정할 수 있다. props를 컴포넌트에 추가해서 다른 컴포넌트에 데이터를 전달할 수 있다. 전달 받은 컴포넌트는 바깥 컴포넌트에서 props를 통해 유저가 원하는대로 설정될 수 있다. ✔️ 데이터를 전달하는 컴포넌트는 '밖/상위컴포넌트', 전달받는 컴포넌트는 '안/하위컴포넌트'이다. props를 만드는 방법 html 요소의 속성처럼, 컴포넌트 태그 안에 / 속성 = {값} / 의 형태로 만든다. 값에는 외부 컴포넌트의 변수가 ..

리액트에서 return 으로 컴포넌트 태그들을 뿌려줄 때, retuen이 반환하는 결과는 하나여야만 한다. 하지만, 우리 컴포넌트들은 하나일 수 없다. 그래서 로 이웃하고 있는 코드들을 묶는다. 하지만, 이렇게 래핑 만을 위해 div 태그를 만드는 것은 프로그래밍적이지 않다. 시멘틱 하지도 않을 뿐더러, DOM 에 실제로 의미 없는 div들을 렌더링하기 때문이다. (div soup) 대신 wraping 컴포넌트를 만들어 쓸 수 있다. const Wrapper - props -> { return props.children; }; export default Wrapper; 래퍼 컨포넌트는 props.children 을 반환하고 있다. 이렇게 만들어준 래퍼를 div 태그 대신 사용한다. 그럼, 래퍼는 단 하나..

const FormControl = styled.div` margin: 0.5rem 0; & label { font-weight: bold; display: block; margin-bottom: 0.5rem; } & input { display: block; width: 100%; border: 1px solid #ccc; font: inherit; line-height: 1.5rem; padding: 0 0.25rem; } & input:focus { outline: none; background: #fad0ec; border-color: #8b005d; } &.invalid input { border-color: red; background: #ffd7d7; } &.invalid label { co..

리덕스 데이터 흐름 Action → Dispatch → Reducer → Store Cmarket redux 과제 설명 페이지는 아이템 리스트 페이지(ItemListContainer)와 장바구니 페이지(ShoppingCart) 총 두 페이지 Store의 initial state에는 전체 아이템 목록(items), 장바구니 목록(cartItems)이 들어있습니다. 각 ItemListContainer, ShoppingCart 페이지 컴포넌트 및 components 폴더의 여러 컴포넌트들에서 Store(state)에 접근해 보세요. (Redux에서 제공하는 hooks, useDispatch, useSelector를 사용합니다.) 📂 짚어보기 과제와 관련된 코드를 보기 전에 redux가 실행될 수 있게 해주는 ..

리덕스 키워드 액션 (Action) 상태에 변화가 필요할 때 발생시킴 (객체하나로 표현) type을 필수로 그외의 값들은 개발자 마음대로 생성 액션 생성함수 (Action Creator) 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함 필수 아님 리듀서 (Reducer) 변화를 일으키는 함수 현재의 상태와 액션을 참조하여 새로운 상태를 반환 스토어 (Store) 한 애플리케이션당 하나의 스토어 현재의 앱 상태와, 리듀서, 내장함수 포함 디스패치 (dispatch) 스토어의 내장함수 액션을 발생 시키는 것 구독 (subscribe) 스토어의 내장함수 subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출 (리액트에서는 connect 함수 또는 useSelect..

강의를 보며 만든 가계부. 사실 30퍼밖에 이해를 못한 듯 하다. 코드 보며 따로 이해하는 시간을 가져야겠다. 어떤 코드를 어떻게 사용할지 생각하기 각 컴포넌트와 함수, props, state가 어떤 역할을 하는지 따져보기 목록이 없을 때 Add 버튼을 눌러 입력 폼을 열었을 때 지출을 입력했다. 2022년 5월과 6월의 그래프 차이가 눈에 띈다. 22.6.30 각 컴포넌트가 어떤 역할을 하는지, props와 state로 어떤 값을 주고 받는지 추적한 흔적 나만 알아볼 수 있게 휘갈겼다. 생각보다 금방 할 수 있었다. 앞으로 이해 안가면 이렇게 그리면서 공부하는 게 좋겠다.

📂 리액트에서 데이터의 흐름 리액트는 각자 다른 역할을 하는 다양한 컴포넌트들의 집합이다. 리액트의 컴포넌트는 단일책임 원칙을 기본으로, 한 컴포넌트는 한 가지 역할만 한다. 한 컴포넌트에 다른 컴포넌트가 부모 자식 관계처럼 들어올 수 있다. 이렇게 역할과 위치를 기준으로 컴포넌트들을 배치하다보면 컴포넌트는 '트리구조'가 된다. 결국 하나의 컴포넌트 안에 모든 컴포넌트들이 위치하게 되는 것이다. 리액트 안의 데이터는 이러한 트리구조에 따라 위에서 아래로 흐른다. 한 부모 안에 위치한 자식 컴포넌트는 부모가 가지고 있는 데이터를 넘겨 받아 쓸 수 있다. 데이터가 부 -> 자 이렇게 아래로 흐르니까. 단방향 데이터 흐름은 리액트의 중요한 키워드이다. 컴포넌트는 바깥에서 props를 이용해서 속성을 전달 받아..