전체 글 (28) 썸네일형 리스트형 HOOK State 컴포넌트의 상태 const [state, setState] = useState(초기값); 변수들의 값이 유지됨 State에 변화가 발생하고 렌더링이 되어도 Ref의 값은 그대로 유지됨 따라서 변경시 렌더링이 발생하면 안되는 값들을 저장할 때 사용함!! 2. DOM 요소에 접근 컴포넌트 최적화를 위해 사용되는 Hook => useMemo, useCallback useMemo useMemo에서 Memo란 Memoization 컴포넌트가 업데이트 되고 렌더링 될때, 업데이트가 필요없는 불필요한 컴포넌트까지 같이 리렌더링 되는 경우가 있다 이런 경우 성능이 떨어지게 되는데, 이를 방지하기 위해 사용하는 것이 useMemo이다. useMemo는 연산된 값을 렌더링 시 재사용할 떄 쓰인다 기본형태: us.. 화살표 함수 문법 일반 함수와 화살표 함수의 차이점 일반 함수: 함수 선언식과 함수 표현식 function main(){ return "hi"; } 함수 선언식: 함수를 선언하는 가장 기본적인 방식, 함수의 호이스팅이 됨. -함수 선언식은 함수의 이름을 기재해줘야 됨. 따라서 익명의 함수를 사용할 수 없음 *호이스팅: 함수의 선언을 최상단으로 끌어올리는 것 function main(){ return "hi"; } 함수 표현식: 익명의 함수 사용 가능 const main = function(){ console.log("hello") } 화살표 함수 (ES6 때 생김) const main = () => { console.log("hi"); } //기본 표현식 function add(a, b) { return a + b; } .. JavaScrpit - This this -> { } 객체를 가리키는 뜻 this가 가리키는 객체는 상황에 따라 다름 this는 함수를 호출한 객체이다 전역적인 문맥에서 this는 window를 가리킴 함수 내부에 있는 this는 어떤 함수를 호출했느냐에 따라 달라짐 일반적으로 함수의 this값은 .왼쪽에 있는 값 this 값이 바뀌지 않게 고정하고 싶으면 Bind 를 사용하면 됨 바인드 함수를 만들고 바인드 함수안에 this 값을 넣어줌 main.bind 안에 들어가 값이 고정된 값이 된다 object란 이름의 객체안에 name 값은 별코딩 이지만 뒤에 bind로 name값을 멋진 객체로 고정해주면 this값은 멋진 객체가 호출된다 React - List와 Key List의 항목 별로 key를 부여해야지 특정 항목만 업데이트 된다. key가 없으면 전체 항목이 업데이트 됨으로 비효율적 key에는 index값을 넣으면 안됨(공식문서에서 최대한 지양하라고 기재됨) key는 고유해야되며 중복되서는 안됨 Virtual DOM(가상돔) Viirtual DOM 가상돔 DOM(Document Object Model) getElementById()나 querySelector()와 같은 API를 사용하여 DOM 내부에 접근해서 조작한다 React의 가상돔은 실제돔이 아닌 실제돔의 복사본 이 실제돔의 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어 있음 가상돔은 실제돔과 다르게 직접적으로 접근할 수 없고 따라서 수정할 수 없음 React는 항상 두 가지 형태의 가상돔 구조를 가지고 있음 1. 렌더링 이전 화면 구조(내용)를 나타내는 가상돔 2. 렌더링 이후에 보이게 될 화면 구조(내용)를 나타내는 가상돔 React는 state가 변경될 때마다 화면이 새로 렌더링 됨. React는 렌더링이 발생 될 상황에 놓일 때마다 새로운 화면에 들어갈 .. URI와 URL의 차이 1. URI(Uniform Resource Identifier) 통합 자원 식별 Uniform은 리소스를 식별하는 통일된 방식을 말합니다. Resource란, URI로 식별이 가능한 모든 종류의 자원(웹 브라우저 파일 및 그 이외의 리소스 포함)을 지칭합니다. Identifier는 다른 항목과 구분하기 위해 필요한 정보입니다. 즉, URI는 인터넷상의 리소스 “자원 자체”를 식별하는 고유한 문자열 시퀀스입니다. 2. URL(Uniform Resource Locator) URL은 네트워크상에서 통합 자원(리소스)의 “위치”를 나타내기 위한 규약입니다. 즉, 자원 식별자와 위치를 동시에 보여줍니다. 웹 사이트 주소 + 컴퓨터 네트워크 상의 자원 이는 웹 사이트 주소뿐만 아니라 컴퓨터 네트워크 상의 자원을 모.. http://127.0.0.1 주소란? IP 주소 127.0.0.1은 localhost 또는 루프백 주소(자신의 컴퓨터를 의미) 라고하는 특수 목적의 IPv4 주소이다. 모든 컴퓨터는이 주소를 자체 주소로 사용하지만 실제 IP 주소처럼 다른 장치와 통신 할 수는 없다. 로컬 컴퓨터를 원격 컴퓨터인것처럼 통신할 수 있어 주로 데이터 전송을 테스트하는 수단으로 주로 사용한다! display: inline과 inline-block에 대해서 알아보기 display: inline; display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 inline 엘리먼트로 이나 , 태그 등을 들 수 있습니다. 예를 들어, 여러 개의 inline 엘리먼트 다음과 같이 마크업하면 줄바꿈 없이 순서대로 한 줄에 보이게 됩니다. inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것입니다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다. display: inline-block; 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처.. 이전 1 2 3 4 다음
