Front-end/React12 props 부모컴포넌트에서 자식컴포넌트로 state/함수 등 다양한 것을 전달할 수 있고 그것을 할수 있게 하는것이 props! (위에서 아래로만 전달가능) - 위에서 아래로만 계속 흐르는데... 이게 단점은 컴포넌트의 수가 많아지면 흐르는게 너무 많음 props drilling! 때문에 상태관리 tool이 필요하게됨. 일반적으로 작명에 state명={state명}으로 지음. 자식컴포넌트에 props 파라미터 등록후 props.state명 사용하면 됨. 2022. 5. 8. component 만드는 법 컴포넌트 만드는 법 독립적인 공간에 만든다. 함수명은 대문자로 만든다. return() 괄호안에 html을 담는다. 병렬 표현은 불가하다. 만약 중복해서 넣어주고 싶다면 제일바깥에 감싸준다. 원하는 위치에 또는 으로 표현한다. 참고) 컴포넌트 만드는 문법2 const Modal =()=>{} 어떤 HTML들을 Component 만드는게 좋을까 기준은 없습니다만 관습적으로 어떤 부분을 주로 Component화 하냐면 - 사이트에 반복해서 출현하는 HTML 덩어리들은 Component로 만들면 좋습니다. - 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋습니다. - 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 Component로 만드는게 좋습니다. .. 2022. 5. 7. state 사용법 state 사용법 a는 state에 보관했던 자료, b는 state 변경 도와주는 함수. **Destructuring 문법 -> let num =[1,2] let [a,c]=[1,2] 배열 안에 있던 것을 쉽게 꺼내씀. state를 왜 써야하나? state가 변경하되면 html에 즉각적으로 html재랜더링 되게 만드는것. 자주 변경 될 것같은 것을 전부 state로 만들면 됨. let [a,b]=useState([배열 ]) 하단에서 꺼내쓸때는 {a[배열 인덱스]} 이벤트 발생시 바로 함수실행으로 만들어도 됨. state를 변경하는 것은 state변경함수를 써야함 (새로운state) 위의 예시에서는 updateLike() Edit Title 버튼을 눌렀을때 기존 state가 가지고있던것 말고 새로운 것으로.. 2022. 5. 7. 리액트 작동원리/JSX/ 리액트 작동 원리 App.js 에서 작성된 내용이 index.js를 통해 index.html 로 전달되어 화면에 구현됨. package.json 파일 내부에 는 프로젝트에 대한 정보가 기록되어있음. (이름,버전,사용라이브러리 등) jsx 문법 데이터 바인딩은 {중괄호} App.js에서 스타일 수정은 style={ { 프로퍼티명:'값' } } final 요약 2022. 5. 6. 브라우저 기본 API (local storage) 브라우저가 리프레쉬 되어도 정보를 저장해두는 것. 기본적으로 저장할때 string으로 저장된다는 것을 잊지말자. 2022. 5. 5. 상태 끌어올리기 (lifting state up)/폼 검증(form validation) - 상태 끌어올리기 (lifting state up) 자식컴포넌트 안에서만 쓰이던 상태를 상위 컴포넌트에서 함께 쓰고싶을때, 그 상태를 위로 끌어올리게 되며 이것을 상태 끌어올리기라고함. 부모컴포넌트로 끌어올린 후 자식 컴포넌트에서 props로 부르게되면 자식컴포넌트에서도 사용할 수 있음. -폼 검증(form validation) 2022. 4. 7. 함수 컴포넌트 사용해보기(헤더) 리액트의 입구 파일 main.js - JSX문법을 사용하는 곳은 리액트 모듈을 import 해줘야함 (import React from 'react';) 함수컴포넌트를 만들어서 앱의 헤더를 만들어줌. - 모듈로 등록하는것 (export default Header; ) 함수컴포넌트와 클래스 컴포넌트의 가장큰 차이는 상태의 유무 함수컴포넌트에는 스테이트가 없음. 리액티브 개념과는 상반됨. 상태가 변함에 따라 ui도 자동으로 반영되는것이 리액티브한 성질. 리액트 컴포넌트에서 ui상태로 사용할 수 있는것은 스테이트 말고 props. state가 컴포넌트 내부에서 관리하는 것이라면 props는 외부에서 들어와 내부 ui에 영향을 주는것. props를 사용하여 함수컴포넌트를 유연하게 만들어보자. (재활용 가능하도록).. 2022. 4. 6. 리액트 조건부 랜더링 검색폼 구현하기 2 조건부 렌더링 💡요구사항: 검색어를 입력하면 x 버튼이 보이고, 없으면 x 버튼을 숨긴다. 입력 요소에 무언가 입력하면 우측에 x 버튼을 추가한다. 반대로 입력한 문자를 삭제하면 버튼이 사라져야 한다. 조건에 따라 보이거나 숨겨야 하는 조건부 렌더링 기능을 사용해서 요구사항을 구현할 수 있겠다. 리액트에서 조건부 렌더링 하는 방식은 세 가지다. 엘리먼트 변수를 사용하는 방식 삼항 연산자를 사용하는 방식 && 연산자를 사용하는 방식 1. 엘리먼트 변수를 사용하는 방식 class App extends React.Component { constructor() { super(); this.state = { searchKeyword: '', }; } handleChangeInput(event).. 2022. 3. 31. REST Api https://ko.wikipedia.org/wiki/REST REST - 위키백과, 우리 모두의 백과사전 대한민국의 힙합 음악가에 대해서는 R-EST 문서를 참고하십시오. REST(Representational State Transfer)는 월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식이다. 이 ko.wikipedia.org 요약 REST API(RESTful API, 레스트풀 API)란 REST 아키텍처의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스를 뜻합니다. REST는 Representational State Transfer의 줄임말입니다. Rest API의 개념 및 서버, 구현 등을 이 페이지에서 설명합니다. API 또는 애플리케이션 프로그래밍 .. 2022. 3. 24. 이전 1 2 다음
