dev/React19 [React18] 합성 >> 컴포넌트에서 다른 컴포넌트를 담기 - 틀을 잡고, 도화지에 기반을 다진다. =틀을잡고 : 나는 쉽게 뼈대를 만든다고 생각했다 뼈대 컴포넌트 = 도화지에 기반을 다진다 : 도화지는 Frames를 그려줄 BuildUp 함수를 말하고 기반을 다진다는것은 >>도화지BuildUP에 틀을 잡은Frames의 {props.children} 에 기반을 다져준다는 것이다. 이때 이방식은 여러 가지 방식으로도 사용할 수 있습니다.똑같은 방식으로 틀을잡고, 도화지에 틀에 기반을 다져줍니다. >>틀을다져 줍니다. 이번에는 2곳을 props를 통해서 전달받습니다. >> 도화지에 틀을다져 줍니다. >> 이번에는 Frames 안에서 직접 태그를 사용하여 그려준것이 아니라 이미 생성해 놓은 함수를 props를 통하여 틀에 전달해.. 2023. 1. 26. [React18] React - Form >> 제어컴포넌트 - HTML 에서 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 합니다. - React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state속성에 유지되며 setState()에 의해 업데이트 됩니다. -React state를 single source of trust 로 만들어 두 요소를 결합 할 수 있습니다. 그러면 폼을 렌더링하는 React 컨포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 제어 컴포넌트라고 합니다. - event.target은 해당 이벤트가 발생한 해당 엘리먼트를 의미한다. class NameForm extends React.Compo.. 2023. 1. 22. [React18] 리스트와 Key -- 여러개의 컴포넌트 렌더링 하기 엘리먼트 모음을 만들고 {}를 이용하여 JSX에 포함시킬수 있다. const numbers = [ 1,2,3,4,5 ]; const listItems = numbers.map( (number) => {number}); const root = ReactDOM.createRoot(document.getElementById('root')); root.render({listItems}); -- 일반적으로 컴포넌트 안에서 리스트를 렌더링 합니다. const numbers = [ 1,2,3,4,5 ]; function NumberList(props){ const numbers = props.numbers; const listItems = numbers.map( number => .. 2023. 1. 21. [React18] 조건부 렌더링 -- Greeting 컴포넌트에 전달되는 props 값에 따라서 UserGreeting 또는 GuestGreeting 을 나타낸다. function UserLogin(){ return Hello, users } function GuestLogin(){ return Hello, guest } function LoginCheck(props){ const loginCheck = props.loginCheck; if(loginCheck){ return }else{ return } } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); -- 엘리먼트 변수 >> 출력의 다른 부분은 변하지 않은 채로 컴포넌트의 일부를 조건.. 2023. 1. 21. [React18] setState() State를 올바르게 사용하기 1. State 값을 직접 수정하지 마라 this.state.comment = 'Hola" (X) 잘못된 사용방법 * state 값을 직접 수정할 수 있는것은 Constructor(props){} 안에서만 지정할수 있다. 2. setState() 를 사용해라 >> setState( updater [,callback] ) >> updater와 callback 함수를 인자로 가지고 있으며, callback은 생략이 가능하다. >> updater는 다음과 같은 형태를 가지는 함수이다. -- (state, props) => stateChange state는 변경사항이 적용 되는 시점에 컴포넌트가 가지는 state에 대한 참조로, 대신 전달된 state, props를 기반으로 새로운.. 2023. 1. 17. [React18] props 컴포넌트에서 전달되는 속성은 props로 전달된다. function Comment(props) { return ( {props.author.name} {props.text} {formatDate(props.date)} ); } Comment 컴포넌트를 더 작은 컴포넌트로 쪼개어 보자 function Avatar(props){ return( 2023. 1. 11. [React18] 엘리먼트 렌더링 React 엘리먼트를 렌더링 하기 위해서는 DOM엘리먼트를 = document.getElementById('root') ReactDOM.createRoot()에 전달한 다음 = ReactDOM.createRoot(document.getElementById('root'))) React 엘리먼트()를 root.render() = ReactDOM.createRoot(document.getElementById('root')).render(element) 에 전달해야 합니다. [[ 기존에는 ReactDOM.render(element, destination) ]] 으로 출력을 실시했었다. >> 이렇게 렌더링 된 엘리먼트 업데이트 - React 엘리먼트는 불변객체입니다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자.. 2022. 12. 11. [React] 외부 데이터 사용 - 오늘날 웹앱에서 외부 데이터를 다루는 방식은 상당히 표준화 됬으며, 다음과 같은 순서를 따른다 >> 1. 앱이 원격 서비스에게 데이터를 요청한다 >> 2. 원격 서비스는 요청을 수신하고 요청된 데이터를 돌려보낸다 >> 3. 앱이 그 데이터를 받는다 >> 4. 앱은 받은 데이터를 가공해 사용자에게 보여준다. == 웹 요청에 관한 기초 == >> 브라우저에게 서버로 요청 정보를 보내라는 지시와도 같다. 브라우저는 요청을 전송하고, 잠시후 서버로 부터 응답을 받으며, 남은 일을 처리한다. 이 모든 통신과정은 HTTP 프로토콜 떄문에 가능하다. >> 브라우저가 HTTP를 사용해 만드는 요청을 HTTP 요청이라고 한다. >> 페이지를 다시 로딩하지 않고도 비동기식 요청과 데이터 처리를 수행하는 기술을 Ajax.. 2022. 12. 2. [React] DOM 엘리먼트 접근 DOM 엘리먼트 접근 - HTML 엘리먼트의 속성이나 메소드에 직접 접근해야할 일이 생길것이다. 자바스크립트의 DOM API를 통해 직접 HTML 엘리먼트를 다루는 일이 '리액트 방식'으로 할 때보다 더 쉬운 경우가 많기 때문이다. - 리액트는 HTML 엘리먼트에 대한 DOM API에 접근할 수 있게 하는, ref라는 도구를 제공한다. - 또한 페이지 안의 어떤 HTML 엘리먼트든 렌더링할 수 있게 하는 포털이라는 기능도 제공한다. -- 예제를 통해 한번 알아보도록 하자 >> ref 와의 첫만남 - 대부분의 경우 render 메소드 안에서 HTML을 닮은 JSX 코드를 작성해왔다. 리액트는 DOM안에서의 최종 HTML 엘리먼트와 JSX 사이를 연결해주는 ref라는 기능을 제공한다. - 위의 render .. 2022. 12. 1. [REACT] 컴포넌트 생명주기 render - shouldComponentUpdate가 false를 리턴함으로써 업데이트 작업을 건너 뛰지만 않는다면, render 메서드가 다시 호출됨으로써 컴포넌트가 올바로 보이게 보장한다. >> 생명주기 메소드와의 만남 - 컴포넌트의 일생에서 다양한 시점에 호출되는 이벤트 핸들러라고 생각하면된다. >> componentWillMount >> componentDidMount >> componentWillUnMount >> componentWillUpdate >. componentDidUpdate >> shouldComponentUpdate >> componentWillReceiverProps >> componentDidCatch + 생명주기 메소드와 함께 자주 사용할 하나의 메소드가 더있다. 바로 .. 2022. 12. 1. 이전 1 2 다음
