전체 글

useState를 사용해야 하는 이유지역 변수는 렌더링 간에 유지되지 않는다 => 재렌더링 시 지역변수는 초기화된다. 리액트는 지역 변수를 변경되어도 렌더링을 일으키지 않는다.  => 지역변수가 변경되어도 컴포넌트를 다시 렌더링해야 한다는 것을 인식하지 못한다.따라서 컴포넌트를 새로운 데이터로 업데이트하기 위해선 다음 두 가지가 필요합니다. 1. 렌더링 사이에 데이터를 유지해야 한다. 2. 리액트가 데이터 변화를 감지하고 컴포넌트를 다시 렌더링하도록 유발한다. 위 두 가지를 useState 훅이 제공하기 때문에 리액트에서는 let대신 useState를 사용해야 한다. 사용방법const [index, setIndex] = useState(0);

이벤트 전파export default function Toolbar() { return ( { alert('You clicked on the toolbar!'); }}> alert('Playing!')}> Play Movie alert('Uploading!')}> Upload Image );}위 코드에서 버튼을 클릭하면 해당 버튼 이벤트 핸들러의 함수가 먼저 실행되고 이후 div 태그의 이벤트 핸들러 함수가 실행된다.하지만 버튼이 아닌 툴바만을 클릭하면 div의 이벤트 핸들러 함수만 실행된다. 이벤트 전파를 방지하는 방법function Button({ onClick, children }) { return..

이벤트 핸들러에 함수 전달&호출하기// 함수를 전달하기 (올바른 예시) // 함수를 호출하기 (잘못된 예시)올바른 예시에서는 handleClick 함수가 onClick 이벤트 핸들러에 전달된다면 리액트는 해당 함수를 사용자가 버튼을 클릭했을 때만 호출합니다.그러나 잘못된 예시에서는  handleClick 함수가 onClick 이벤트 핸들러에서 호출된다면 리액트는 해당 함수를 사용자가 버튼을 클릭하지 않아도 렌더링 과정에서 호출합니다.이는 리액트가 렌더링 과정에서 JSX 와 {  } 내의 자바스크립트가 즉시 실행되도록 구현되어 있기 때문입니다.매개변수가 필요한 함수를 이벤트 핸들러에 전달하고 싶다면?그렇다면 매개변수가 필요한 함수를 이벤트 핸들러에 전달하고 싶으면 어떻게 코드를 작성해야할까요?이는 익명함..

JavaScript에서 객체 자료형, 이터러블 객체, 유사 배열은 모두 다양한 형태의 데이터 구조를 나타내지만, 각기 다른 특징과 사용 방법을 가지고 있습니다.이 세 가지 개념의 관계를 이해하면 JavaScript의 데이터 구조를 더 잘 활용할 수 있습니다. 객체 자료형 (Object)객체는 JavaScript의 기본 데이터 구조 중 하나로, 키-값 쌍의 집합을 나타냅니다.모든 JavaScript 객체는 프로토타입 체인(prototype chain)을 통해 속성(property)과 메서드(method)를 상속받습니다.javascriptconst obj = { name: 'Alice', age: 30, greet: function() { console.log('Hello!'); }};  특징 ..

본 실습은 실습자가 AWS 회원가입을 완료함을 가정하고 진행합니다.  버킷 생성하기우측 상단에 `콘솔에 로그인`을 클릭합니다. `루트 사용자 이메일을 사용하여 로그인`을 클릭합니다.(이메일로 회원가입한 실습자 한정입니다.) `루트 사용자`를 선택합니다.이메일 주소 입력 후 `다음` 버튼을 클릭합니다.이후 비밀번호도 입력합니다. 콘솔 로그인 후 검색창에 S3 입력 후 S3를 클릭합니다.  왼쪽 줄 세개( ≡ ) 아이콘 클릭 후 `버킷`을 클릭합니다. 우측 상단  지역을 변경합니다. (서울로 변경) `버킷 만들기`를 클릭합니다. 버킷 이름을입력합니다.(버킷 이름은 고유해야하며 대문자 사용 불가능, 하이픈(-) 사용 가능 ) 퍼블릭 액세스 설정 해제경고 체크 박스 체크 활성화 이후 선택 사항들은 모두 기본값으..

https://velog.io/@arthur/%EB%B2%88%EC%97%AD-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%8F%99%EC%9E%91%EC%9D%98-%EA%B1%B0%EC%9D%98-%EC%99%84%EB%B2%BD%ED%95%9C-%EA%B0%80%EC%9D%B4%EB%93%9C-A-Mostly-Complete-Guide-to-React-Rendering-Behavior [번역] 리액트 렌더링 동작의 (거의) 완벽한 가이드 [A (Mostly) Complete Guide to React Rendering Behavior][번역] 리액트 렌더링 동작의 (거의) 완벽한 가이드velog.io

1. 함수는 동작을 수행하기 때문에 이름이 주로 동사입니다.2. 함수 호출 코드만 보아도 해당 함수가 무엇을 하고 어떤 값을 반환할지 바로 알 수 있어야 합니다.3. 함수 이름은 함수가 어떤 동작을 하는지 설명할 수 있어야 합니다.

1. userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용합니다.2. 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름은 피해야합니다.3. 최대한 서술적이고 간결하게 명명합니다.( data와 value는 나쁜 이름의 예시입니다. 이런 이름은 아무것도 설명해주지 않습니다. 코드 문맥상 변수가 가리키는 데이터나 값이 아주 명확할 때에만 이런 이름을 사용합시다.4. 자신만의 규칙이나 소속된 팀의 규칙을 따르세요.(만약 사이트 방문객을 'user’라고 부르기로 했다면, 이와 관련된 변수를 currentVisitor나 newManInTown이 아닌 currentUser나 newUser라는 이름으로 지어야 합니다.)