언젠가는 펼쳐 볼 아카이브

좋은 앱을 만들기 위한 고려사항 번들 사이즈 CSS 코드가 차지하는 사이즈는 무척 중요한 요소임 서버로부터 받아오는 파일들은 다양한데 크기가 클수록 페이지의 로딩 속도가 느려질 수 있음 앱 성능 animation, transition 등 유저와의 상호작용에서 스타일 코드의 성능이 중요한 요소임 사용자에게 유리한 UI/UX 자바스크립트를 이용한 다양한 스타일 기법 UI toggling, anmation, 다크모드, 복잡한 UI 컴포넌트 등은 자바스트립트에 대한 지식만으로 구현하기 힘듦 유지보수가 용이하고 확장 가능한 코드를 작성해야함 스타일에 관련된 코드를 어떻게 작성하고 관리하는 가에 대한 지식이 필요함 React 앱에서의 스타일링 방법 CSS import : CSS(or SCSS, Sass) 파일을 i..

Hook 이란? 컴포넌트에서 데이터를 관리하고 데이터가 변경될 때 상호작용을 하기 위해 사용하는 것 hook은 리액트 함수(컴포넌트, hook) 내에서만 사용가능 함 hook의 이름은 반드시 "use"로 시작해야 함 최상위 level에서만 hook을 호출할 수 있음 실제로 프로젝트 1차에서 최상위 level이 아닌 조건문에서 사용하려고 했을 때, react가 에러를 발생시킨 경험을 했음 hook의 장점 컴포넌트의 함수가 많아질 때 클래스 구성 요소로 리팩토링할 필요가 없음 UI에서 로직을 더 쉽게 분리하여 두 가지 모두 사용 가능함 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 hook을 사용할 수 있음 hook을 사용하면 컴포넌트로부터 상태 관련 로직의 추상화가 가능해짐 리액트 hook..

Props 란? 컴포넌트로 전달되는 매개변수 기본적으로 컴포넌트에 원하는 값을 넘겨줄 때 사용함 넘겨줄 수 있는 값은 변수,함수,객체, 배열 등 javascript 요소라면 제한이 없음 주로 컴포넌트의 재사용을 위해 사용함 props 는 읽기 전용으로, 값을 변경해서 사용하고 싶다면 새로운 변수를 생성해 변경해야 함 부모 컴포넌트에서 자식 컴포넌트로 전달하는 값으로 자식 컴포넌트에서는 Props를 직접 수정할 없음 DOM element의 attribute 기본 DOM element들의 attribute는 camelCase 로 작성함 data 또는 aira 로 시작하는 attribute는 예외 html 의 attirbute 와 다른 이름을 가지는 attribute가 있음 ex) class(=>classNa..

ReactJS란? 사용자 인터페이스를 만들기 위한 javascript 라이브러리 생산성/재사용성이 높음 Component와 Hook을 활용함 Hooks를 통해 컴포넌트 상태를 쉽게 관리할 수 있음 작은단위의 독립적인 요소로 개발하여 개발자의 생산성과 코드의 재사용성을 높임 풍부한자료/라이브러리 전 세계적으로 가장 활발하게 커뮤니티 활동이 이뤄지고 있어 방대한 자료와 편리한 오픈소스 라이브러리 등이 공유되고 있음 Redux, Mox : 애플리케이션에서 전역적으로 쓰이는 상태 값을 관리하는 대표적인라이브러리 Fluent UI, Ant Design, 머튜리얼디자인? 대표적인 디자인 프레임 워크 다양한 사용처 React-Native에 적용하여 안드로이드 애플리케이션 및 IOS 애플리케이션 등을 개발할 수 있음 ..