react8 [React] state 몬스터 흰색은 왜 맛있을까 예제와 함께 이해를 해볼 예정🔥🔥🔥 먼저 앞서 요약해서 말하면 props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props를 받아오기만하고, 받아온 props를 직접 수정은 불가능하다. 반면에 state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있다. 1. state 란? State는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이가 있다. props를 사용했는데도 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 .. 2023. 1. 16. [React] component 사전 스터디 팀원분들이 되게 열심히 하신다. 왠지 나까지 좋은 기분,,, 다들 파이팅🔥 1. Component 란? 일단 컴포넌트라는 용어에 대해 먼저 알아보면 cs에서 다룰때는 하드웨어처럼 "독립적인 기능을 수행하는 단위 모듈"을 뜻한다. 소프트웨어는 하드웨어랑 달리 독립적으로 개발되지 않는 경우가 많고, 다른 모듈과의 호환을 생각하며 개발하지 않았다. 그래서 재사용뿐만 아니라 유지보수도 어려웠다. 하지만 소프트웨어의 재사용성을 높이고 유지보수를 용이하게 하게 위해 나온 기술이 바로 컴포넌트(Component)이다. 2. React에서 Component 리액트에서 컴포넌트는 앱을 이루는 최소한의 단위이다. 또한 props나 state와 같은 데이터를 입력받아 DOM 노드를 생성한다. 이러한 컴포넌트들이.. 2023. 1. 16. [React] JSX 3.1 선릉 가락국수 맛집 찾아냄 const element = Hello, world !!; 오늘은 갑자기 코드 먼저 던졌다. 뒤에 설명하기엔 이만한 게 없기에 그랬으니 양해 부탁드립니다. 위에 희한한 태그 문법은 문자열도, HTML도 아니다. 그럼? 이걸 바로 JSX라고 하며 Javascript를 확장한 문법이다. HTMl을 공부하고 사용해 본 사람들은 이걸 굳이 이렇게 쓴다고? 라는 생각을 갖고 있을 수 있겠지만, 이 JSX는 Javascript의 모든 기능이 포함되어 있다. 뒤에서 좀 더 자세하게 예제를 다뤄볼 예정이니 인내심을 갖고 스크롤을 해보자. (JSX는 UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것 것을 권장한다.) 1. JSX란? JSX(Javascript XML.. 2023. 1. 16. [React] React란? 장비를 사는 것도 구하는 것도 쉽지 않다. 1. 리액트(React.js)란? React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북에서 제공해 주는 프런트엔드 라이브러리이며, 컴포넌트 기반으로 되어 있어서 컴포넌트에 데이터를 내려주면 개발자가 설계한 대로 UI를 만들어 사용자에게 보인다. 웹 페이지를 만들기에는 html, css 로도 충분하지만 html, css 만으로 동적인 데이터를 UI에 뿌려주기에는 적합하지 않다. 이때 리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 손쉽게 만들 수 있기 때문에 리액트를 사용한다. React는 facebook에서 제공해 주는 프런트엔드 라이브러리라고 볼 수 있다. 싱글 페이지 애플리케이션이나 모바일.. 2023. 1. 16. 이전 1 2 다음 반응형
