희락코딩

#1. Redux 리덕스는 상태관리를 효율적으로 도와주는 라이브러리 입니다. 웹, 앱 어플리케이션의 상태들이 많아지고 복잡성이 늘어남에 따라 보다 효율적이고 안정적인 상태 관리를 위해 리덕스와 같은 상태 관리 라이브러리를 사용합니다! npm트렌드 동향에 따르면 리덕스는 가장 높은 사용률을 가지고 있습니다! 그리고 리덕스는 리엑트를 위한 라이브러리라고 착각하지만 자바스크립트 환경이라면 사용 가능한 라이브러리 입니다! #2. Redux를 쓰는 이유 리엑트는 상위 컴포넌트에서 하위 컴포넌트로 단방향 흐름으로 상태를 전달 시키는 구조로 되어 있습니다! 만약 위의 사진처럼 복잡해진 컴포넌트 관계 속에서 상태를 변화 시켜 주려한다면 왼쪽 모양처럼 올라가고 내려가고 많은 컴포넌트를 거쳐 원하는 컴포넌트에 상태를 전달..

#. Styled Components 가 뭐얌 ? css나 sass같이 class, id, tag name을 가져와서 쓰지 않고, 별도의 스타일 컴포넌트를 생성하여 태그에 쓰는 것을 말합니다. 스타일 컴포넌트는 ui단위를 나누어 컴포넌트화 하기때문에 재사용이 가능하며 props로 속성까지 전달하여 조건을 붙일수 있어 여러모로 다양한 이점이 있습니다. #. Styled Components 특징! Automatic critical CSS - Styled Component 는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입합니다. 따라서 코드를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있습니다. No c..

#useState 16.8이후부터 useState라는 함수를 사용하여 함수형 컴포넌트에서도 state를 사용할 수 있게 되었습니다. 이과정에서 Hooks이라는 것을 사용하는데 이번 블로깅은 useState와 onclick을 활용해서 카운터를 만들어 보겠습니다. 우선 이함수를 사용하기전에 배열의 비구조 할당에 대한 개념이 잡혀야 useState함수를 좀더 익숙하게 사용할 수 있습니다. 1 2 3 4 5 6 7 8 9 // 일반적일 배열 할당 const array = [1, 2]; const one = array[0]; const two = array[1]; // 배열 비구조화 할당 const array = [1, 2]; const [one, two] = array; cs 위 와같이 배열 비구조화 할당을 사..

#Props Props는 컴포넌트의 속성을 설정할 때 사용하고 어느 특정 값을 전달할때 사용합니다. props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 할수 있습니다. props는 상위 컴포넌트에서 하위 컴포넌트로 전달하는 개념이며, 하위 컴포넌트에서 상위 컴포넌트에 값을 전달 할수 없습니다. ※ props는 상위 컴포넌트 → 하위 컴포넌트 ( ㅇ ) 하위 컴포넌트 → 상위 컴포넌트 ( x ) #props 기본 사용방법 예를 들어 App 컴포넌트에 Joycoding 컴포넌트를 사용 할 때 name 이라는 값을 전달해주고 싶다고 가정해보고 코드를 작성해 봅시다!! App.js 이때 Joycoding 컴포넌트에서 name의 값을 쓰려면 어떻게 쓰면 될까요 ? 아래 코드를 봅시다 Joycod..

# JSX JSX는 자바스크립트의 확장 문법입니다. 얼핏보면 HTML과 유사하게 생겼지만 실제로는 JavaScript입니다. 리엑트 컴포넌트 파일에서 XML형태로 코드를 작성하면 바벨이 번들링 되는 과정에서 일반 자카스크립트 형태의 코드로 변환 합니다. JSX의 장점 1. 보기 좋고 가독성이 좋다. 위에 바벨로 작성한 코드를 비교 해보면 누가봐도 JSX가 쉽고 가독성이 더 좋다는 것을 알 수 있습니다. 또한 HTML과 매우 유사해서 금방 익숙해집니다. 2. 높은 활용도 HTML 태그를 사용할 수 있을 뿐만 아니라 컴포넌트를 HTML 태그 쓰듯이 JSX 안에서 작성 할 수 있습니다. JSX가 자바스크립트로 제대로 변환이 되려면 지켜줘야 하는 몇가직 규칙이 있습니다! 예시를 통해 하나하나 알아봅시다!! #1..