React5 23.05.16 >>>>>>> 😀마켓플레이스 (컴포넌트 만드는거 도와주는거) ES7 React/Redux/GraphQL/React-Native snippets 😀 C:\User\기태환>cd\ C:\>cd ncs C:\NCS>cd workspace(react) C:\NCS\workspace(react)>cd 02_jsx C:\NCS\workspace(react)\02_jsx>npx create-react-app 02_jsx C:\NCS\workspace(react)\02_jsx1>cd.. C:\NCS\workspace(react)>cd 02_jsx1 C:\NCS\workspace(react)\02_jsx1>code . ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 😀보기 - 터미널 -.. 2023. 5. 16. 23.03.03(state, map, props부모/자식, 전개연산자) 😀😀 {/* state 변경함수의 동작 원리 - 기존state === 신규 state(글제목 === copy) 를 먼저 검사 - 그래서 같으면(true), state 변경을 해 주지 않음 --> virtual DOM은 바뀐 부분만 변경하기 때문에 (state쓰면 기존값을 남겨두면서 새로운 값으로 변경 가능) - [...] => 전개연산자: 괄호를 벗겨서 주소값이 아닌 데이터 값을 넣어줌 -> 주소값이 바뀜 */} 😀컴포넌트 호출 방법: 😀컴포넌트 함수 작성(함수이름의 첫글자는 대문자!) function 함수이름() { return ( ) } // 어떤걸 컴포넌트로 만들면 좋은가? // 1. 반복적인 html이 있을 때 // 2. 큰 페이지를 작성 시 // 3. 자주 변경되는 것들에 /* 부모 컴포넌트에서.. 2023. 3. 3. 23.03.02(컴포넌트, props, state) 😀 display: flex flex container (부모요소) flex item (자식요소) 😀리액트는 자바스크립트라고 생각하면 되는데 특이하게 html도 같이 쓸 수 있음 😀구글검색: 그림 이모티콘 https://kr.piliapp.com/emoji/google/ - 리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러가지 컴포넌트로 구성이 됨. - 컴포넌트의 기능은 단순한 템플릿 이상임. 데이터가 주어졌을 때 이에 맞추어 ui를 만들어 주는 것 뿐만 아니라, api를 이용하여 컴포넌트가 화면에 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의의 메서드를 만들어 특별한 기능을 부여할 수도 있음. - 컴포넌트의 종류 1. 함수형 .. 2023. 3. 2. 23.02.28(JSX) 😀😀 리액트는 컴포넌트들의 집합 - 리액트 프로젝트를 만들 때는 Node.js를 반드시 먼저 설치해야 함. - Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임. (노드 공식 사이트에는 노드를 위와 같이 설명하고 있음.) ※ 런타임이란 특정 언어로 만든 프로그램을 실행할 수 있는 환경을 뜻한다. 따라서 노드는 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있게 하는 자바스크립트 실행기이다. 특히 2008년 구글이 V8 엔진을 사용하여 크롬을 출시했고, V8 엔진은 다른 자바스크립트 엔진과 달리 매우 빨라 라이언 달(Ryan Dahl)은 2009년 V8 엔진 기반의 노드 프로젝트를 시작하며 세상에 나왔다. - Node.js에 대한 자세한 설명은 아래 사이트를 참조. https://h.. 2023. 2. 28. 이전 1 2 다음