함수3 리액트[기초] 비구조화 할당 문법(구조 분해 문법) | 배열 비구조화 할당 비구조화 할당(destructuring assignment) 문법 이란? props 내부 값을 바로 추출하는 방법을 말한다 객체에서 값을 추출하는 문법으로 구조 분해 문법 이라고도 한다 함수의 파라미터 부분에서도 사용할 수 있다 만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용한다 /* 기존 방법 */ // 자식 컴포넌트 const MyComponent = (props) => { return( // 안녕하세요, 제 이름은 기본 이름 입니다. 안녕하세요, 제 이름은 {props.name} 입니다. // children 의 값은 리액트 입니다. children 의 값은 {props.children} 입니다. ; ); }; // 부모 컴포넌트에서 props 값을 따로 지정 하지 않았을때 보여줄 .. 2022. 5. 27. 리액트[기초] 초기 렌더링 과 조화 과정 렌더링 이란? 사용자 화면에 view를 보여주는 것을 말한다 초기 렌더링이란? 어떤 UI 관련 프레임워크, 라이브러리를 사용하던지 간에만 처음에 어떻게 보일지 정하는 초기 렌더링이 필요하다 리액트에서는 초기 렌더링을 다루는 함수 render 가 있다 render 함수란? 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다 html 형식의 문자열을 반환하지 않고 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 한다 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 이를 우리가 정하는 실제 페이지의 DOM요소 안에 주입한다 조화 과정 이란? 리액트에서 뷰를 업데이트할 .. 2022. 5. 24. 자바스크립트[기초] Array 생성자 함수 ※ Array 생성자 함수는 전달된 인수의 개수에 따라 다르게 동작하므로 주의가 필요하다. 전달된 인수가 1개이고 숫자인 경우 length프로퍼티 값이 인수인 배열을 생성한다. const arr = new Array(10); // 배열의 크기를 정해준다 console.log(arr); // [empty * 10] console.log(arr.length); //10 전달된 인수가 없는 경우 빈 배열을 생성한다. 즉,배열 리터럴[]과 같다 new Array(); // [] 전달된 인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열을 생성한다. // 전달된 인수가 2개 이상이면 인수를 요소로 갖는 배열을 생성한다. new Array(1,2,3); // [1,2,3] // 전달된 인수가 1개지만.. 2022. 4. 18. 이전 1 다음 728x90