뭐든 즐기면서 ;)

제어 컴포넌트(Controlled Component) React는 HTML에서 , , 와 같은 폼 엘리먼트를 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에 의해 값이 제어되는 입력 폼 엘리먼트를 "제어 컴포넌트"라고 합니다. state에 저장하여 사용하면, 다른 엘리먼트에 input의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있고, 신뢰성을 보장할 수 있습니다. 신뢰성을 보장한다는 뜻은 script를 통해 값이 변경될 수도 있기 때문에 이를 막기 위해 캡슐화를 해준다는 거라고 이해하면 될 것 같습니다. 1. input 태그 // *주의사항 : value에 값을 강제하면 사용자가 수정불가 import React from 'react'; impo..

에러 내용 npm install 명령어 실행 시 뜨는 에러 no such file or directory, open 'C:\Users\user\package.json' 해결 방법 1. npm install 명령어를 실행한 위치가 package.json이 위치하고 있는 경로가 맞는지 다시 한 번 확인해 봅니다.. (2번 방법의 경우 글로벌(전역) 적용 방법인 것 같고, 3번 방법은 해당 프로젝트에서만 쓸 package 설정이다.) 2. 해당 위치 C:\Users\user에 가서 확인해 보면 실제로 package.json 파일이 없긴 하다. 해당 파일은 없고, package-lock.json 파일이 존재한다면, lock.json파일을 삭제 후 package.json파일을 작성 후 저장하여 재실행 해봅니다. ..

※ List (map함수를 이용하여 list 엘리먼트를 반환받음) - javascript map // 배열 선언 const numbers = [1, 2, 3, 4, 5]; // .map 함수를 이용하여 list 엘리먼트를 반환받음. const listItems = numbers.map(number => {number} ); // list 엘리먼트를 렌더링함 ReactDOM.render( {listItems}, document.getElementById('root') ); - component화 function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map( number => {number} ); // 엘리먼..

※ 조건부 렌더링 : 조건에 따라 다양한 컴포트 보여주기 조건부 렌더링1 : https://tadaiswhatever.tistory.com/21 1. 논리 연산자 사용 방법 - { 조건 && 엘리먼트} function Sample(props) { const unreadMessages = props.unreadMessages; return ( Hello! // {조건 && 엘리먼트} {unreadMessages.length > 0 && You have {unreadMessages.length} unread messages. } ); } const messages = ['React', 'Re: React', 'Re:Re: React']; ReactDOM.render( , document.getElementB..

※ 조건부 렌더링 : 조건에 따라 다양한 컴포트 보여주기 - JavaScript와 같이 보여주기가 가능합니다. 1. if문 사용 방법 - 아래 두 개의 컴포넌트가 존재합니다. function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } - isLoggedIn 변수의 boolean 값에 따라 'UserGreeting' 또는 'GuestGreeting' 컴포넌트가 보여집니다. function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } return ; } React..

※ 주의사항 * JSX 콜백 안에서 this를 사용할 경우에 주의해야 합니다. 1. Bind 사용 - bind를 해주기 전과 후의 차이점 아래 코드 중 'this.handleClick = this.handleClick.bind(this);'에 집중해 주세요. constructor에 작성한 '.bind(this)'를 통하여 'constructor'와 'handleClick' 함수 내에서 this를 확인하였을 때, 같은 객체(Toggle 클래스)를 가리키는 것을 확인할 수 있습니다. (이미지 참고) bind처리를 하였을 때 class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true..

※ React에서 Event 처리하는 방법 React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. - javascript와 React에서의 함수 이벤트 적용 방법 차이점. 1. 함수 이벤트 적용 방법 아래는 javascript에서의 함수 이벤트 적용 방법입니다. // javascript Activate Lasers 아래는 React에서의 함수 이벤트 적용 방법입니다. // React Activate Lasers 2. 이벤트를 막는 방법 * javascript에서는 return false;를 하면 이벤트를 막을 수 있지만, React에서는 적용되지 않습니다. 다른 방법으로 preventDefault;를 명시적으로 ..

※ Update : 컴포넌트가 업데이트될 때 실행되는 함수들. - 컴포넌트가 업데이트되는 경우 1. pops값 변경 2. state값 변경 3. 부모 컴포넌트가 리렌더링될 때 4. this.forceUpdate로 강제로 리렌더링 시킬 때 이 때 호출되는 함수 순서는 아래와 같습니다. - getDerivedStateFromProps : 마운트 과정 시에도 호출되었던 함수입니다. 업데이트될 때에도 호출됩니다. - shouldComponentUpdate : 컴포넌트의 리렌더링 진행 여부를 결정하는 함수입니다. true를 반환하면, 아래 함수들을 호출하여 업데이트에 따른 리렌더링을 진행합니다. false를 반환하면, 리렌더링을 하지 않고, 아래 함수도 실행되지 않습니다. - render : 업데이트된 값을 사용..