본문 바로가기

분류 전체보기

 (40)
[React] Refs, Portals useRef 특징 - 값을 입력창에서 읽어들이고 싶을 때 사용 가능 - 컴포넌트가 재실행되어도 값을 잃지 않음(시스템 내부에서 이루어지기 때문) * 읽어들이는 목적으로만 사용해야 하며 , 조정하기 위해서 ref를 사용하면 Dom에 직접적으로 접근하게 되기 때문에(react의 개념에 반하게 됨) 사용 자제. 사용자가 아닌 React가 값을 바꾸게 해야함 - useRef로 받는 값은 항상 자바스크립트로 객체 사용방법 export default function Test(){ const testRef = useRef(); function handleClick(){ console.log(testRef.current.value); } return ( Click ) } => 위와 같이 ref와 input을 연결하면,..
[React] React Developer Tools https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?pli=1 React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 47cf347e4 on 3/8/2024. chromewebstore.google.com react로 프로젝트를 진행하면서, 컴포넌트를 보다 쉽게 확인 할 수 있는 툴을 소개한다. 이 프로그램은 리액트 어플리케이션 내의 성능 문제들을 찾고 고치는 것도 가능하다고 한다, 리액트React Developer Tools로 위의 링크에서 설치 가능하다. =..
주절주절..팀원 구하는건 참 힘들어 다시 취준생이 되면서, 학원 수업 이후로 첫 사이드 프로젝트를 만들어보자고 결심했다. 이력서에 들어갈 포트폴리오로 학원에서 만든 플젝을 쓰자니, 너무 삐약이 시절에 만든거라 성에 차지도 않고.. 2년 동안 열심히 회사에서 실무 경험을 쌓았으니, 다시 프로젝트를 진행하면 좀 더 완성도 있지 않을까 싶었다. 그래서 처음 팀원을 구하기 위한 사이트로 유료 플랫폼 비사이드 포텐데이를 이용하고자 구매했는데... 유료 플랫폼임에도 팀원 구하는게 쉽지 않았다. 처음 며칠은 팀원을 직접 찾고, 이후에는 동의하는 사람에 한해서 자동으로 팀원을 매칭해준다. 그런데도 매칭이 안되면 자동 하차된다. 나는 당연히 팀원을 찾지 못하면 자동적으로 팀원을 구해줄는 시스템으로 넘어가는 건 줄 알았는데... 동의 버튼을 클릭 해야하더라..
[React] 정적인 컴포넌트를 보관할 때 header나 footer와 같은 정적인 컴포넌트를 보관할 때에는 굳이 component로 보관하지 않아도됨 index.html 위와같이 header를 컴포넌트로 만들지 않고 index.html에 직접 만들어도 된다는 소리다. img src 를 참조할 때, public 폴더 내에 png파일을 넣으면 png파일 이름만 src에 삽입하면 된다 (index.html, index.css에서 직접 참조 가능) 경로 public : public/에 저장된 이미지는 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적으로 제공되기 떄문이다. 이 파일들은 브라우저 내에서도 직접방문 가능 ex) localhost:8080/test-logo.png => 빌드 프로세스에 의해 처리되지 않는이미지 ex ) 파비콘 대체적으로 사..
[React] proxy props 사용하기 id, className 등등 하나하나 구조분해할당을 통해 props로 넘기게 되면 효율 성이 떨어지므로 ...props를 사용하여 부모 컴포넌트에 있는 속성을 자식 컴포넌트로 넘길 수 있음. 1. 부모 컴포넌트 hi 2. 자식 컴포넌트 export default function Section({title, children, ...props}){ return ( {title} {children} ) }
[React] key prop의 중요성 1. Error 문구 : 목록에 있는 각 자녀가 고유의 키 prop을 가져야 한다는 문구 Warning: Each child in al list should have a unique key prop. Check the render method of ''. See for more information. 위의 에러가 나는 예시 코드 return {LIST.map((item) => ())} 2. 해결 방법 내장 요소너 커스텀 컴포넌트에 고유한 key prop추가 *고유한 값이어야함!! return {LIST.map((item) => ())} 2. key가 필요한 이유 1). 리액트가 아이템을 구별하기 위해 사용하기 위해서 : 리액트 시스템 내부에서 이 목록을 효율적으로 렌더링하고 업데이트하기 위해 사용. 즉,..
[React] useState() 1.useState가 필요한 이유 function App() { let content = 'init content' function handleSelect(){ content = 'update content' } return { {content} } } 1).잘못된 구현 : content의 값이 화면에서 업데이트 되지 않음. 즉 return()내의 jsx 코드가 한번만 실행되어 UI가 업데이트 되지 않음 > 모든 JSX코드가 재평가되지 않음 2). 값이 업데이트 되지 않는 이유 : 리액트는 JSX 코드를 보고 현재 렌더링된 UI와 비교하기 때문에 UI를 업데이트 하려면 리액트에 의해 재평가 되어야 함. 3). 해결방안 : useState(); (1). 리액트 라이브러리에서 불러와야하는 특별한 함수의 도움..
[React] 동적인 eventHandler 구현 시 주의 잘못된 구현 function handleClick(){ console.log('click'); } {children} -> 잘못된 구현인 이유 : handleClick()은 이 코드 라인이 실행될 때 이 함수가 바로 실행됨. (화면이 렌더링 될때) 올바른 구현 {children} -> 단순히 함수 이름을 사용 > onClick값으로서의 함수를 전달 > 리액트에 의해 시스템뒤에서 실행됨
[React] 컴포넌트, index.html, index.jsx, jsx 특징, React 실행방식 1.Components 1). 특징 (1). Html, css, js 가 합쳐져 UI 한 부분을 규정하고 조정 (2). UI를 관리하기 쉽도록 작게 분해하여 UI의 다른 위치에도 사용할 수 있게 해줌 (3). 비슷한 코드가 한곳에 저장됨 (한 파일에 js, html,css 같이 작성 가능) (4). 디자인과 개발 원칙을 따름 (5). 커스텀 컴포넌트는 실제로 렌더링 된 DOM에 나타나지 않음 기본 HTML요소만 존재 (6). 컴포넌트 트리는 리액트가 분석하고, 리액트는 모든 컴포넌트에서 나온 모든 JSX코드를 결합하여 전반적인 DOM을 생성(화면에 보이는 요소) 2). 규칙 (1). 함수의 제목이 대문자로 시작해야함 - div, image와 같은 내장요소는 소문자로 시작, 리액트에게 내장된 컴포넌트가 아..
[React] React에 대한 짧은 개요 1. react 1). 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리 2. 왜 react를 쓰는걸까? 1). Js VS React (1). Js - 명령형 코드 - 거쳐야 할 단계를 정의 (2). React - 선언형 코드 - 목표로 하는 UI 상태를 정의 - 자바스크립트로 UI를 업데이트 - 만든 컴포넌트를 재사용할 수 있어 js 에 비해 상대적으로 코드의 양이 적음 2. React 프로젝트의 초기 설정이 필요한 이유 1). 리액트 코드는 브라우저가 인식하지 못함. (1). jsx코드를 js로 변환시키는 작업이 필요함 -> 그렇기 때문에 js와 달리 간단하게 사용할 수 없음. (2) . 또한 리액트 코드를 최적화 시켜야 함 ex) 변수, 함수 이름 최소화, 과도한 여백 줄이기, -> 웹사이트 방..

티스토리툴바