2020-07-14 08시 개발자 글 모음 | "[일상다반사] English4Deve" 외 13개 이야기

Review - 리팩토링 (Martin Fowler) by 백근영

html 사용법 : data- 를 시작으로 data-이름을-지정하면-된다 와 같이 tag element 에 속성으로 사용 :
{state
setSelectedName ] = useState ( 'none' ) ; const onClick = ( e ) => { const name = e
name ; setSelectedName ( name ) ; } ; return ( < > < button onClick = { onClick } data - name = 'Hwang' > Hwang < / button > < button onClick = { onClick } data - name = 'Kim' > Kim < / button > < button onClick = { onClick } data - name = 'Jo' > Jo < / button > < button onClick = { onClick } data - name = 'Sim' > Sim < / button > < button onClick = { onClick } data - name = 'Lee' > Lee < / button > < button onClick = { onClick } data - name = 'Jang' > Jang < / button > < p > selecteName is < strong > { selectedName } < / strong > < / p > < / > ) ; } export default Dataset ;

function withClassExtends ( InputCompo ) { return ( class OutputCompo extends InputCompo { } ) }
function withDebug ( InputCompo ) { return ( class OutputCompo extends InputCompo { render ( ) { return ( < > < p > props : { JSON
import getDisplayName from 'recompose/getDisplayName' function withDisplayNameChange ( InputCompo ) { class OutputCompo extends Component { } OutputCompo

렌더링과 무관한 값을 고유값으로 저장 해야 할때(클래스형의 멤버변수 처럼 사용) useRef() 를 사용해 이전 상태값을 저장
{ useRef } from 'react' function Compo ( ) { const inputElement = useRef ( null ) const onClick = ( ) => { if ( inputElement
focus ( ) } } return ( < div > < input ref = { inputElement } type = ' text ' /> < button onClick = { onClick } > focus the text ) }

setName ] = useState ( '' ) ; const [ age
( ) => ( { addAge : value => setAge ( age + value )
} ) ) return ( < div > < p > { ` name is ${ name } ` } > < p > { ` age is ${ age } ` } > ) } export default forwardRef ( ChildCompo )

} callApi ( ) ; } } -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- function Compo ( { firstName
current = false ; callApi ( ) } } -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
'yes' : 'no' } ) } } -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- function Compo ( { speed } ) { const [ isFaster

function HasMounted ( { childrun } ) { const hasMounted = useHasMounted ( ) ; return children ( hasMounted ) ; } function withHasMounted ( Compo ) { return ( function ( props ) { const hasMounted = useHasMounted ( ) ; return < Compo {
props } hasMounted = { hasMounted } /> ; } ) } class ClassCompo extends React
Component { render ( ) { const { hasMounted } = this